Emacs JavaScript mode

Here's my update to an old javascript-mode (authors Steven Champeon and Ville Skyttä).  In essence, I was unhappy with indentation, but I also removed some stuff that I don't need and fixed various small things, such as highlighting literal regexps.

The indentation is based on CC Mode, which is almost Good Enough for JavaScript; the original javascript-mode.el (note that I'm talking about the version I had back in 2004; they might have fixed it in between, but I don't think so) had some indentation problems, for examples in cases like this:

obj.method({ foo: "bar",
                        test: "asdf",
                        qwer: "qwer",
                        f: function() {
                        return true;
                }});

It looks quite ugly, and due to CC Mode automatic indentation it was even hard to fix manually. ;-)  One day I started looking into how to make my JS mode not suck, and at the end of the next day I came up with a modified version that Does What I Mean.  To install, download the file in a directory in your LISP path and add the following to your .emacs:

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

Indentation style

Here are some examples of how this mode indents JS with my preferred settings (c-basic-offset is 8 characters, case-label is "*" (4 characters)).  The sample above would indent like this:

obj.method({ foo: "bar",
             test: "asdf",
             qwer: "qwer",
             f: function() {
                     return true;
             }});

However, if I put the "foo:" on a new line, it would indent like this:

obj.method({
        foo: "bar",
        test: "asdf",
        qwer: "qwer",
        f: function() {
                return true;
        }
});

Other samples:

var a = {
        lorem : "ipsum",
        foo   : "bar"
};

var a = { "lorem" : "ipsum",
          check   : "foo bar",
          bar     : 1234,
          method  : function() {
                  return { foo  : "bar",
                           test : 123
                         }
          }
        };

switch (what) {

    case "foo":
        do_foo();
        break;

    case "bar":
        do_bar();
        break;

}

This is my javascript-mode-hook:

(defun my-js-mode-hook ()
  (require 'cperl-mode)
  (setq tab-width 8
        indent-tabs-mode nil
        c-basic-offset 8)
  (c-toggle-auto-state 0)
  (c-toggle-hungry-state 1)
  (define-key javascript-mode-map [(meta control |)] 'cperl-lineup))

The last keybinding allows me to quickly lineup colons in hashes by placing the caret before the first colon, then selecting the whole hash and pressing M-C-|.

How does it work

This mode uses the comprehensive indentation engine from CC Mode, which means that you should be able to customize it heavily as described in the CC Mode Manual.

Since the C syntax is quite different from JavaScript, I needed to make some fixes (C doesn't support literal hashes, nor does it know about inner anonymous functions, etc.).  In order to add these fixes I advised the c-guess-basic-syntax function from cc-engine.el.  "Function advices" are a cool ELisp concept that allows you to have some code executed along with a function that you can't modify.  The original c-guess-basic-syntax will run first, then our "advice" kicks in and determines if we're in a JS situation that's likely to be misunderstood by CC-Mode.  If that is the case, it will run some analysis and return proper information so that the CC indentation engine will do the Right Thing.

I found that for literal hashes it's best to work with the “arglist-*” classes, that is, it will return:

• “arglist-intro” if the caret is on a line that starts a hash and the bracket is on the previous line
• “arglist-cont” if the caret is on a line that continues a hash and the bracket is alone on the first line
• “arglist-cont-nonempty” if the caret is on a line that continues a hash and the first element starts on the same line as the bracket
• “arglist-close” if the caret is on a line that ends a hash (contains the ending bracket).

It will also properly detect functions:

• “defun-open” if the caret is on a line that contains the bracket starting a function, but not the function declaration
• “defun-block-intro” if the caret is on the first line in a function block (doesn't contain the bracket)
• “defun-close” if the caret is on a line containing the bracket that ends a function

I also declared the following in javascript.el:

(c-set-offset 'arglist-close '(c-lineup-close-paren))
(c-set-offset 'arglist-cont 0)
(c-set-offset 'arglist-cont-nonempty '(js-lineup-arglist))
(c-set-offset 'arglist-intro '+)
(setq c-special-indent-hook nil)

(but you can override them in javascript-mode-hook if you wish).  Coupled with the declarations above and the advice to c-guess-basic-syntax, I ended up with a mode that Does What I Mean.  I'm happy, end of story. :-)

Other JavaScript modes on the Planet

For a long time I was working with a modified version of Karl Landström's JavaScript mode.  Indentation wasn't as good as I wanted, but it was still the best available for my lazy ass.

I recently discovered js2-mode by Steve Yegge.  That's an amazing piece of work because it contains a full JavaScript parser and can inform you about a lot of potential problems in your code, such as missing semicolons (I simply love this one) or missing the "var" to declare locals, using undeclared variables, etc. etc.  It will set a new standard for editing JavaScript (it seems that it will be included in the official GNU Emacs distribution!).  My main problem with it is that the indentation engine is based on Karl's mode which is not good enough for me...  I'd love it if I could integrate it with this simple advice to CC Mode.