Emacs setup for web development

This is the follow up for basic emacs setup post. In this post I will explain how to update your emacs setup for web development. I will cover

Add nxhtml

To install nxhtml, go to project site and download it.Put it in your plugins directory (~/.emacs.d/plugins/nxhtml/). You can find installation instructions inside nxhtml README.txt file in nxhtml directory(~/.emacs.d/plugin/nxhtml/README.txt). In my case I just added following script to .emacs file (just like README.txt explains)

(load "~/.emacs.d/plugins/nxhtml/autostart.el")

Additionally you can byte-compile nxhtml from nxhtml menu. To learn more about nxhtml, go to project site .

Add js2

Js2 is an enhanced javascript major mode. It has a great syntax checking feature that marks the syntax ( and programmatic) problems. You can download it from project site. Installation instructions can be found in wiki. Here is How I installed it.

First I downloaded js2.el and put it on my pluginsdirectory (~/.emacs.d/plugins/js2.el). Then I added following code to my .emacs file

(autoload 'js2-mode "js2" nil t)
(add-to-list 'auto-mode-alist '("\\.js$" . js2-mode))

You can bytecompile js2 by command

M-x byte-compile-file RET ~/.emacs.d/plugins/js2.el RET

Add jslint support

Js-lint support that I will explain here has a small bug. It does not marks the line with the errors, instead it marks one line blow the line that contains the error.

I personally do not enable jslint in development. I only use js2 syntax checking. But you might want to turn it on before your code goes to production. Here is how you can add jslint support to emacs.

First Install Rhino

sudo apt-get install rhino

Then download jslint(rhino edition) and put it in your .emacs.d folder(~/.emacs.d/plugins/jslint/jslint.js).

Create a new script file called jslint_flymake.el and put it some where on your emacs load path (~/.emacs.d/plugin/jslint_flymake.js)

(require 'flymake)

(defun flymake-jslint-init ()
  (let* ((temp-file (flymake-init-create-temp-buffer-copy
             'flymake-create-temp-inplace))
         (local-file (file-relative-name
              temp-file
              (file-name-directory buffer-file-name))))
    (list "rhino" (list (expand-file-name "~/.emacs.d/plugins/jslint/jslint.js") local-file))))

(setq flymake-allowed-file-name-masks
      (cons '(".+\\.js$"
      flymake-jslint-init
      flymake-simple-cleanup
      flymake-get-real-file-name)
        flymake-allowed-file-name-masks))

(setq flymake-err-line-patterns 
      (cons '("^Lint at line \\([[:digit:]]+\\) character \\([[:digit:]]+\\): \\(.+\\)$"  
          nil 1 2 3)
        flymake-err-line-patterns ))
(provide 'flymake-jslint)

Note that this script has jslint.js file dependency inside. If you put your jslint.js file in different path, change the path in this script accordingly.

Lastly add following lines to .emacs file

(require 'flymake-jslint)
(add-hook 'javascript-mode-hook
      (lambda () (flymake-mode t)))

I also recommend to add yasnippet to your setup. yasnippet is really helps when you write html. it is covered in basic emacs setup post.

A note for django developers

If you are developing django apps you might want to cover emacs basic setup and emacs python setup post with this one. All three posts covers total of my emacs setup for developing django applications.

blog comments powered by Disqus