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
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
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.
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
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
I do trust all of the concepts you’ve presented to your post.
“You will *NOT* see a bottom in real estate when unemployment is shooting sk28#rd.&aw221;Thaty17;s why I think these mortgage mod plans the gubmint keeps floating are all bread and circuses.
Helpful information. Lucky me I found your website by accident,
and I am shocked why this coincidence didn’t came about earlier!
I bookmarked it.
Excellent blog right here! Additionally your website rather a lot up fast!
What host are you the usage of? Can I get your affiliate link for your host?
I wish my site loaded up as quickly as yours lol