It’s always nice to get something for free. That’s how I feel about JSLint. Running your JavaScript code through JSLint gives you a few advantages:
- Coding style consistency — always use ; at the end of a line
- Syntax error detection — did you forget that ) ?
- Logical error detection — did you forget that var?
There’s a whole bunch of stuff JSLint will pick up for you.
I have talked before about JSLint in the context of SpiderMonkey, but, nowadays, I install node.js for a few things. If I run JSLint through node.js, that means I won’t have to install SpiderMonkey anymore.
Installing Node and NPM
I admit, these pieces of software are moving fast and the instructions (or lack thereof) are limited. But these things will vary with your OS and skill level.
I’m going to focus on the Vim integration, but go ahead and install Node and install NPM.
Installing JSLint
I recommend the simply named “jslint”. You can look it up on GitHub as node-jslint.
Make sure you don’t forget that “-g” flag with NPM. NPM changed a lot in version 1.0.
Vim Integration
The end goal is:
You are in a JavaScript file, you press F4, Vim runs JSLint on your file, parses the errors and puts your cursors on the exact location of the first error with the others one waiting in the quickfix list.
The main part of integrating with Vim to “compile” something is to set makeprg and errorformat (aka efm). If you ever need to integrate with something else, be sure to Google for those.
Since we are going to invoke :make all the time, I’m going to bind it to F4. (put it in your .vimrc)
nmap <F4> :w<CR>:make<CR>:cw<CR>
Step by step:
- :w — save the file, doesn’t hurt if it’s already saved
- :make — invoke make
- :cw — open the quickfix window if there are errors. Close it if there are no errors.
Next, create $HOME/.vim/ftplugin/javascript.vim. Put these lines into it:
setlocal makeprg=jslint\ %
setlocal errorformat=%-P%f,
\%–G/*jslint\ %.%#*/,
\%*[\ ]%n\ %l\\,%c:\ %m,
\%–G\ \ \ \ %.%#,
\%–GNo\ errors\ found.,
\%–Q
The variable makeprg is just was it invoked when you do :make. The variable errorformat are instructions on how to parse the error messages of the “compiler”. That variable and how to configure it are a whole world of complexity.
Now, restart Vim and open some JavaScript file you have lying around. Press F4. Be ready for a lesson in humility.
Troubleshooting
If things don’t work out, try this:
- try to run “jslint” from the command-line, if it doesn’t work Vim won’t work either
- if the output of “jslint” changes format, you’ll have to tweak errorformat
Great job on this post, thanks! :D
Hi, I’m running macvim and I’ve needed to add “filetype plugin on” into the .vimrc because vim doesn’t load the javascript specific configurations.
Good job!
Very nice and clear, works great, you made my day!
Awesome! :)
Another approach is using cc instead of cw
nmap :w:make:cc
which runs jslint, only display your first error in the command line.
(1 of 3): Missing semicolon.
You could fix it, hit f4 again, and repeat until it’s clean – fast and furious
simply awesome, thank you!
Great article. Thanks!
I have a problem though. Jslint works well, but I don’t see error message.
I can see it only if I run “:copen”. Why “:cw” doesn’t work for me?
And it doesn’t look like your quickfix window on your screenshot. For example, errors appears:
#1 Expected ‘;’ and instead saw ‘b’.
var a = 1 // Line 2, Pos 10
#2 ‘b’ was used before it was defined.
b = 3; // Line 3, Pos 1
I see only
#1 Expected ‘;’ and instead saw ‘b’.
#2 ‘b’ was used before it was defined.
without any formatting.
All I can think of while reading your reply is that you might not have the right version of “jslint” installed.
Or that something might be interfering with your setup … you might want to trim your vim config files to a minimum and see if you get the same behavior.
Looks like the error format changed. For v0.1.4 this worked.
errorformat=%-P%f,
\%E%>\ #%n\ %m,%Z%.%#Line\ %l\\,\ Pos\ %c,
\%-G%f\ is\ OK.,%-Q
[…] Node, JSLint and Vim « Jonathan’s Techno-tales […]
Great article! I’m doing this for all of the static code analyzers I use now (pylint, cpplint, etc.). anatortoise, that format works pretty well, but breaks after 10 errors (that’s just an indication of how bad our legacy code is ;p). Here’s a better one:
setlocal errorformat=%-P%f,¬
\%E%>%\\s%##%n\ %m,%Z%.%#Line\ %l\\,\ Pos\ %c,¬
\%-G%f\ is\ OK.,%-Q¬
That one will match after ten errors because it adds another space in front of the pound sign.
Greetings from California! I’m bored to death at work so I decided to check out your website on my iphone during lunch break. I enjoy the info you provide here and can’t wait to take a look when I
get home. I’m shocked at how fast your blog loaded on my mobile .. I’m not even using
WIFI, just 3G .. Anyways, great site!
Thanks man. You are a true webmaster.