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
Thanks for this. That setup for js-comint is going to be particularly handy.
Wow, awesome. What a great tutorial. You are a graceful and lucid writer.
Curious: why not use Yegge’s js2-mode or the older Javascript major modes?
Thanks again for this,
Tom Davey
@Tom js2 has some great features, but I tend to use Emacs 23′s built in js-mode (The natural successor to the old espresso-mode)…
js2 never really got indentation right. only thing that’s even usable is the bouncing indentation setup, which overrides TAB & means that I can’t then use default Yasnippet keys for expansion…
It’s also really, really big for an editing mode – not sure I really want a recursive-descent parser running every 3 seconds when I’m editing a js file on a remote server over ssh :)
I keep meaning to pull a bunch of the better smallish features out of it and bind them with hooks but haven’t gotten around to it
Pleased with myself – finally set up most everything :)
Thanks for the guide.
One thing though…
If I’m wrapping a script in jquery’s “$(document).ready()” then lintnode, understandably, flags the error:
“$.” is not defined.
Fair enough… $ really hasn’t been defined yet.
Is there a way that we can lintnode or flymake to not flag the error?
Yeah, that can come up a lot – if you’re using this version of lintnode then you can pass the –exclude option to turn off specific JSLint warnings [1] – so you’d want –exclude undef.
You can set these from within Emacs – I use this in my ~/.emacs
(setq lintnode-jslint-excludes (list ‘nomen ‘undef ‘plusplus ‘onevar ‘white))
[1] http://www.jslint.com/lint.html#options
You definitely do not want to turn off warnings about undefined variables, since that is the most important part about using jslint.
Unintended global variables is the biggest of headaches (especially in node, where it is an absolute disaster, see http://blog.meloncard.com/post/12175941935/how-one-missing-var-ruined-our-launch).
Instead, you can declare $ at the top of your file: /*global $ */
In js2-mode you can also declare them in the js2-global-externs list.
At the top of your JS files you can add a comment that JSLint will read for option switches and variables declared outside of your script, like so:
/*jslint browser: true */
/*global $,console */
@jesse
@Magnar
I didn’t know about the /*global */ directive – thanks!
Edited the post to suggest this :)
Both jslint and jshint support rc files you can keep in your projects, and thus avoid adding these indicators in source files. e.g. .jslintrc or .jshintrc
Pardon my ignorance, but I can’t seem to get the syntax-checking part to work properly: I’ve set up node as well as your fork of Lintnode, using the same settings in my .emacs, but when I run flymake-start-syntax-check on my js files, it’s all red. I’m using jQuery, but shouldn’t that be ok if I exclude undef in the .emacs setup like you did?
This seems like such a cool addition to my js dev setup that I really want to make it click :)
Tough to debug via comments, if you drop the relevant sections of your .emacs into the github repo issues I’ll take a look…
… and thanks a lot for the guide!
Great blog!
Really thanks for sharing this post! : )
You make me set up a great emacs js env. in few minutes!
a small note: You didn’t yank your latest “))”
to close your (setq inferior-js-mode-hook
and > has replaced the >
Bye and still thanks,
gt instead of >
bye
An alternative to lintnode is to run a standalone version of V8, like so: https://github.com/valeryz/jslint-v8
This removes the overhead of running a node server application just for syntax checking, but still has the speed of the node.js internal engine.
That looks pretty good actually – thanks.
Lintnode can be somewhat flaky, I’ll certainly check it out…
Are you not bothered by the way js-mode indents inlined var declarations? eg
var foo = {},
bar = ”,
baz,
bat;
Kinda sucks… and not only that, but even if you manually space the variables, the syntax highlighting doesn’t recognize them.
I found a bug report on the emacs list for this issue from April, but nothing else. I’m new to emacs and have no idea how to fix it, other than to switch to the modified js2-mode, which I don’t want to do.
Great guide, though. I tried getting js-comint working with Node yesterday and failed. It was invoking the REPL but not sending the region. Going to follow the guide step by step and see if I can fix it. Thanks
So following up myself, when I set up the Node REPL, I get some functionality but it continues to be buggy. If I write a function and highlight it and run M-x js-send-region, I get ‘…’ printed from Node. Likewise if I place the pointer after that function and do M-x js-send-last-sexp. Does anyone else have these problems?
Testing it some more, it seems like js-send-region only works for me if the region is one line. Otherwise it seems the region does not get read into the Node REPL and the REPL prints out ‘…’ . Would love a fix; being able to use inferior shells is one of the major reasons I’m trying to switch to Emacs.
I’ve been looking at this – my impression is that some multiline functions work Ok with js-send-region, but it seems that blank lines confuse it.
Also, embedded tab character in the region causes problems.
I’m working on overriding comint-input-sender to strip out the problematic characters (this seems to be the approved way of altering input to comint) – no success yet.
To avoid the problem, You can just strip empty lines from the text before sending it to the shell. This is done in jsshell, http://marmalade-repo.org/packages/jsshell-bundle , which is like js-comint but runs only on Windows and requires cscript.exe. This module has a defun called jsshell–squish-jscode to accomplish this task.
>> other than to switch to the modified js2-mode, which I don’t want to do.
Quite :)
Was planning on looking into modifying indent behaviour to fix a bug in another project of mine, once I’ve figured out how that works, I may see if I can pull some of those indentation/highlighting bits out as a mode-hook.
Hi! And first of all thanks a lot for this wonderful (and useful) post.
Just an open question: did you came up with something for in-emacs documentation? It could be something like pylookup for the emacs python environment. Probably the point is getting the documentation in the correct format. Any idea?
I don’t use anything for JS within Emacs – the nicest solution I know of is Eldoc mode http://www.emacswiki.org/emacs-fr/ElDoc which works pretty well for Lisp and Python…
Don’t know of anything that does this at present though…
Thanks a lot, man.
Hi, in your $.get and $.post snippets are errors. They contain a “}” too much before the semicolon. Except that, thanks for the snippets. Awesome stuff.
Thanks for the heads-up – in practice I tend not to use $.get & $.post very often – updated the tarball to fix that though
how did you resolve the tab conflict in both autocomplete and yasnippet.
autocomplete works fine but snippet doesn’t work. am i missing something here. When i type fun and hit tab it auto-completes to function rather than expanding the snippet.
btw thanks for the superb article…helped me setting up my emacs.
Something quick. This might be new feature, but you would want to update it, probably. I was following your explanation and found that I also must provide some values to lintnode-jslint-set otherwise node server will not launch from flymake-jslint.
thks
[...] Setting up Emacs as a Javascript editing environment for Fun or Profit « Deadpan Sincerity [...]
Thanks for a great article!
I wondered about one thing: Have you managed to combine comint and js-mode, to get auto-completion (and syntax highlighting) in the interpreter?
Fantastic web page. Many helpful tips here. I am submitting the idea to a few pals ans as well revealing around delicious. And definitely, thank you on your hard work!
[...] todo esto tendremos Emacs listo para programar JavaScript. Por cierto, en esta web encontré gran parte de la información necesaria para escribir este [...]
Thanks for the fantastic article. I’ve been able to get some of it working but have run into some trouble getting flymake up.
After following your directions, I try to visit a .js file and get the following:
File mode specification error: (file-error “Searching for program” “no such file or directory” “node”)
If I add the .nvm directory where node lives to my load-path I then get the following error:
Flymake: Configuration error has occurred while running (curl –form source=<pendingAccounts.test_flymake.js –form filename=pendingAccounts.test_flymake.js –proxy http://127.0.0.1:3003/jslint). Flymake will be switched OFF.
(where pendingAccounts.test.js is the name of the file I'm trying to visit).
For what it's worth, for the next moth or so we'll still be on node 0.6.21
I've started tracking this down (in pauses at work – it'll take a bit) but I wanted to post where I'm at in case it helps someone or if the solution is known.
And thanks again! Viva emacs!
Hmmm. Maybe we need to start jslint first?
Oh snap. I think it has to do with the ancient version of node we’re using here at the ol’ office: 0.6.21
I’ma give up for a while and let the browser tell me when I typo.. We’re supposed to upgrade soon.
magnificent put up, very informative. I wonder why the other specialists of
this sector don’t realize this. You must continue your writing.
I’m confident, you have a great readers’ base already!
Article Source: Daniels is a master trout angler and author, living and trout fishing in the
Mountain West – the heart of trophy trout country.
To keep your campsite free from them, here are good tips to follow:.
Scenes like this early morning scape may be welcoming to several individuals who seek the relaxation of one of the world’s oldest sports: fishing.
You understand therefore significantly in the case of this topic, produced me in my view consider it from a lot of numerous angles. Its like women and men don’t seem to be involved unless it is something to do with Girl gaga! Your own stuffs outstanding. All the time care for it up!
Tɦe brand is high bbay led light… Donald high bay led lights.
This dust can enter the house with the air and cause illness and aggravate any dust related allergies.
Household products such as vegetable oil and castile soap can be combined
with vinegar to clean wood decks naturally as
well. your family, especially children, your friends, your pets and yourself.
Feel free to surf to my webpage – certified Long Island Stair installer [taylorschg.Soup.io]
I see a lot of interesting posts on your page.
You have to spend a lot of time writing, i know how to save
you a lot of work, there is a tool that creates unique, google
friendly posts in couple of minutes, just search in google – laranita’s free
content source
I loved as much as you’ll receive carried out right here.
The sketch is tasteful, your authored material stylish. nonetheless, you command get got an nervousness over that you wish
be delivering the following. unwell unquestionably come more
formerly again since exactly the same nearly a lot often inside case you shield this hike.
Check out my homepage … oklejanie samochodów
Hello there, You have performed an excellent job. I will definitely digg it and in my opinion suggest to my friends. I’m confident they will be benefited from this web site.