deadpan
sincerity

I’ve been doing a lot of Javascript lately, which has naturally led to a whole lot of trips down the .emacs rabbit-hole

So, here are the steps you need to turn OOTB Emacs into the perfect environment for working on Javascript:

Auto-completion

Fizzing!

First up, you’re going to want decent auto-completion, so install the straightforwardly named auto-complete-mode. Due to some mode-name aliasing that goes on in the Emacs23 javascript mode, You’ll need to make sure it can find the relevant Javascript dictionary so

cd path/to/auto-complete/dict
ln -s javascript-mode js-mode

and then add to your .emacs:

(add-to-list 'load-path "~/path-to/auto-complete")
; Load the default configuration
(require 'auto-complete-config)
; Make sure we can find the dictionaries
(add-to-list 'ac-dictionary-directories "~/emacs/auto-complete/dict")
; Use dictionaries by default
(setq-default ac-sources (add-to-list 'ac-sources 'ac-source-dictionary))
(global-auto-complete-mode t)
; Start auto-completion after 2 characters of a word
(setq ac-auto-start 2)
; case sensitivity is important when finding matches
(setq ac-ignore-case nil)

You now have auto-completion for all variable names in all open Javascript buffers, as well as for standard syntax words (setTimeout, parseInt, onFocus etc).

Snippeting

Not content with that, we’ll also want some kind of intelligent snippet package right – how many times do you really want to type all those semicolons and curly braces? Once is good for me.

The excellent Yasnippet provides this (check out the youtube demo if you’ve not come across it before)

Once you’ve got that downloaded and installed, you’ll want some Javascript snippets to load in, the ones I use, for standard Javascript and jQuery can be downloaded from here, and then the directory provided by that tarfile needs to go in yasnippet/snippets/text-mode

So for our .emacs:

(add-to-list 'load-path "~/path/to/yasnippet")
;; Load the library
(require 'yasnippet)
(yas/initialize)
;; Load the snippet files themselves
(yas/load-directory "~/path/to/yasnippet/snippets/text-mode")
;; Let's have snippets in the auto-complete dropdown
(add-to-list 'ac-sources 'ac-source-yasnippet)

Syntax Checking

Whoops...

One of the problems with Javascript programming is that the feedback loop for syntax errors is *slow* – if you’re working with the web you have to wait for a whole pageload. So we’ll want on-the-fly error checking.

Kevin Turner originally wrote Lintnode, which runs a lighthweight node.js server that passes your file to Douglas Crockford’s JSLint to integrate with Flymake – the Emacs solution for on-the-fly syntax checking. The fork I’m currently maintaining at Github contains some enhancements such as automatic initialization and JSLint options passed from Emacs that the original has yet to merge in. Given that JSLint frequently complains about things that you might like it to er, not complain about, the ability to change the options with the lintnode-jslint-excludes variable makes this far more useable.

So:

Install node.js and npm (The package manager for node)

Get lintnode and the dependencies

git clone https://github.com/davidmiller/lintnode.git
cd lintnode
npm install express connect-form haml underscore

Then we need this in our .emacs:

(add-to-list 'load-path "~/path/to/lintnode")
(require 'flymake-jslint)
;; Make sure we can find the lintnode executable
(setq lintnode-location "~/path/to/lintnode")
;; JSLint can be... opinionated
(setq lintnode-jslint-excludes (list 'nomen 'undef 'plusplus 'onevar 'white))
;; Start the server when we first open a js file and start checking
(add-hook 'js-mode-hook
          (lambda ()
            (lintnode-hook)))

Syntax errors will now be given a red background without having to leave the comfort of Emacs.

Even better, if we install the Flymake Cursor package, we get the error message in the minibuffer when the cursor is on a line with an error.

Easy Mistake!

Get the source from http://www.emacswiki.org/emacs/flymake-cursor.el and then add to your .emacs:

(add-to-list 'load-path "~/emacs/minor-modes")
;; Nice Flymake minibuffer messages
(require 'flymake-cursor)

Edit:

As Jesse and Magnar point out in the comments, it’s probably a better idea to not exclude ‘undef from the jslint errors, but rather to declare global variables at the top of your .js file

 /*global $ */

This way you can let jslint know about other libraries you are using, but still get the checks for undefined variables in your own code.

Code folding

Underscore outline

Especially if you’re dealing with large projects, the ability to hide portions of code can be great for maintaining focus. Emacs comes with this built in, but you have to enable it, so returning to our .emacs:

(add-hook 'js-mode-hook
          (lambda ()
            ;; Scan the file for nested code blocks
            (imenu-add-menubar-index)
            ;; Activate the folding mode
            (hs-minor-mode t)))

This means that when your cursor is in the function…

var Foo = 42;
addFoo = function(num){
    // Let's add the meaning of life to
    // our `num` - it'll be fun!
    var meaningful;
    meaningful = num + Foo;
};

… and you M-x hs-hide-block, the function turns into:

Var Foo = 42;
addFoo = function(num){...};

To my taste the default keybinding of C-c @ C-h to hide blocks is somewhat perverse, so I’d recommend this in your .emacs:

;; Show-hide
(global-set-key (kbd "") 'hs-show-block)
(global-set-key (kbd "") 'hs-show-all)
(global-set-key (kbd "") 'hs-hide-block)
(global-set-key (kbd "") 'hs-hide-all)

YMMV.

Javascript Console

Having a REPL for the language you’re working with close to hand is basically required for me to enjoy working with it. Now that we’ve installed node.js, though, we can have us a Javascript console inside Emacs with js-comint…

Once you’ve grabbed the file, your .emacs should have:

(add-to-list 'load-path "~/path/to/js-comint")
(require 'js-comint)
;; Use node as our repl
(setq inferior-js-program-command "node")
 
(setq inferior-js-mode-hook
      (lambda ()
        ;; We like nice colors
        (ansi-color-for-comint-mode-on)
        ;; Deal with some prompt nonsense
        (add-to-list 'comint-preoutput-filter-functions
                     (lambda (output)
                       (replace-regexp-in-string ".*1G\.\.\..*5G" "..."
                     (replace-regexp-in-string ".*1G.*3G" ">" output))))

You can then run a Javascript REPL with M-x run-js and also send portions of files by selecting them and then running M-x send-region. Neat.

By way of conclusion

There are a few other tweaks that make my Javascripting just that little bit nicer, but they’re more personal Emacs setup than anything specific to Javascript. So, there you have it, the perfect Javascript editing environment.

Love regards etc

Tags: editing, emacs, flymake, Javascript, js, jslint, node, nodejs, yasnippet

This entry was posted on Sunday, May 29th, 2011 at 6:21 pm and is filed under favourite things, technical.