Integrating JavaScript lint with vim

After looking for a lint program for JavaScript, I’ve found JavaScript Lint and after a few pokes around the documentation and forum, got it installed and integrated with vim.
I posted this information to the Irish PHP Users’ Group mailing list on Wednesday – thought I’d share it to a wider audience tonight.

This is how I did it, note this process now only works with the downloaded package JavaScript Lint 0.3.0:

I got, compiled and installed javascriptlint:
$ svn co https://svn.sourceforge.net/svnroot/javascriptlint/trunk javascriptlint
$ cd javascriptlint
$ make -f Makefile.ref all
$ cd Linux_All_DBG.OBJ/
$ sudo cp jsl jscpucfg /usr/local/bin/
$ #generate default config file (and edit to taste)
$ jsl -help:conf > /etc/jsl.conf

I added the following lines to the “Defining identifiers” section of jsl.conf, as JavaScript Lint
doesn’t know anything about DOM objects in web browsers.

+define window
+define document
+define alert
+define XMLHttpRequest
+define ActiveXObject
+define Image
+define parent
+define dispatchEvent
+define screen
+define navigator
+define setTimeout

I also turned on the ‘option explicit’ settingÅŸ which causes the linter to catch undeclared variables in the “Defining identifiers” section.

For integrating with vim I added these lines to my ftplugin/javascript.vim file:

set makeprg=jsl\ -nologo\ -nofilelisting\ -nosummary\ -nocontext\ -conf\ '/etc/jsl.conf'\ -process\ %
set errorformat=%f(%l):\ %m
"make F10 call make for linting etc.
inoremap <silent> <F10> <C-O>:make<CR>
map <silent> <F10> :make<CR>

10 Responses to “Integrating JavaScript lint with vim”

  1. Brian says:

    Thanks for putting this together, Ken!

  2. kenguest says:

    You’re very welcome Brian.

  3. BTreeHugger says:

    Excellent idea! I’ve adapted it to output to a new tab, although it is a quick hack. Place the following into your vimrc and use :JSLint to get a new tab with the output of jsl on your currect window’s code. I find this handy because it is possible to see both the output and modify your code at the same time.

    function! JSLint()
    redir => message
    silent ! jsl -nologo -nofilelisting -nosummary -nocontext -conf /etc/jsl.conf$
    redir END
    tabnew
    silent put=message
    set nomodified
    endfunction
    command! -nargs=0 -complete=command JSLint call JSLint()

  4. [...] Running lint on my C code was something I did a lot back in the day. But I always found JSLint annoying; it was too pedantic with respect to coding style, and not very customizable in that regard. Thanks to JavascriptLint and Ken Guest I managed to get F10 bound to opening a new tab with lint’s output on the current file.. [...]

  5. kenguest says:

    Thanks for the extra bit of polish Thomas.
    For completeness, here are all extra identifiers that I have set in my jsl.conf – I had left them out of the post on my blog for brevity.

    +define ActiveXObject
    +define addEventListener
    +define alert
    +define attributes
    +define blur
    +define childNodes
    +define click
    +define clearTimeout
    +define dispatchEvent
    +define document
    +define firstChild
    +define focus
    +define Image
    +define item
    +define lastChild
    +define localName
    +define namespaceURI
    +define navigator
    +define nextSibling
    +define nodeName
    +define nodeType
    +define nodeValue
    +define ownerDocument
    +define parent
    +define parentNode
    +define prefix
    +define previousSibling
    +define removeEventListener
    +define screen
    +define scrollIntoView
    +define setTimeout
    +define tagName
    +define window
    +define XMLHttpRequest

  6. jason says:

    Is there some way to make vim fire this off whenever a js file is saved, and simply print out the first warning? I am just now coming to vim from textmate, which does something similar, which i found to be of great benefit. It doesn’t seem like there needs to be the extra step of calling make. And getting the errors as you go helps keep you in line. You could still get the whole jsl output if you called make…

    .j

  7. kenguest says:

    I don’t know for sure. You might be able to do something with the BufWrite auto command/hook. I’d suggest asking a vim guru on http://www.vim.org/

  8. tayfun says:

    Kevin and Thomas, thanks for your contributions. I checked out a copy from SVN but there were no Makefile.ref so I downloaded the tar.gz file and went from there. Now I have it working with vim.

    Thanks!

  9. Joe says:

    Just wanted to let everyone here know that I’ve created a vim script to automatically check for any lint warnings each time a .js file is saved. http://www.vim.org/scripts/script.php?script_id=2578