Emacs + JavaScript

JavaScript tooling these days is excellent. DevTools, JSLint, a ton of minimizers. Emacs, too, has a few outstanding JavaScript plug-ins that make authoring JavaScript an enjoyable and truly interactive process.

Syntax highlighting and static code analysis


Initially written by Steve Yegge, js2-mode alone is sufficient to make a JavaScript IDE out of Emacs. Basically, a port of Rhino’s parser to Emacs Lisp, js2-mode is the best JavaScript highlighter and syntax checker you can find in any editor. It displays detailed syntax error messages, in the same way a real interpreter would.

js2-mode displaying an error

js2-mode has automatic indentation and even some basic linting built-in: it warns about undeclared variables and missing semicolons.

Homepage: https://github.com/mooz/js2-mode


Tern is not specifically an Emacs plugin. On the contrary, it’s a separate Node.js program, that exposes an HTTP API, any editor can take advantage of. Tern’s author, Marijn Haverbeke, however, included an Emacs plugin to the main repository.

Tern highlighting identifier in scope

Tern also uses a full-fledged JavaScript parser, complete with type inference system. Practically, Tern provides symbol completion, type hints, function signature hints and jump-to-definition. Tern understands explicit type annotations, as well.

Tern autocomplete with company-mode

Homepage: http://ternjs.net

Live editing and inspection


Kite, by Julian Scheid, is an Emacs front-end for Chrome’s Developer Tools. It connects to any of the opened Chrome tabs from Emacs. Kite has a DOM inspector and allows CSS and JavaScript live editing. You can even set breakpoints and step through JavaScript code from Emacs using Kite.

Homepage: https://github.com/jscheid/kite


Mihai Bazon wrote a WebSocket server that interacts with Emacs to evaluate arbitrary JavaScript code in the context of a running Node.js program. Once again, the program uses a real JavaScript parser (UglifyJS 2, by the same author). Livenode can evaluate JavaScript expression under the cursor or an explicitely selected region.

Homepage: https://github.com/mishoo/livenode/