Javascript Syntax Checking From Vim

Posted by: Mike | Filed under: ,

Syntax checking from vim is handy. By checking your Javascript syntax from vim, rather than the browser, you'll save time and aggravation. To do it, you'll need Spidermonkey, which allows you to run Javascript without a browser, and JsLint, a Javascript syntax-checker writter in Javascript.

Installing Spidermonkey

Consult the build instructions page for installation instructions for many architectures, or use the quick instructions below for Ubuntu and Centos.

Quick install for Ubuntu 
sudo apt-get install spidermonkey-bin.
Quick install for Centos 5 
wget http://ftp.mozilla.org/pub/mozilla.org/js/js-1.7.0.tar.gz
tar zxvf js-1.7.0.tar.gz
cd js/src
make -f Makefile.ref
mv Linux_All_DBG.OBJ/js /usr/bin

Once you've installed Spidermonkey you'll be able to enter a Javascript shell by entering the command 'js' (exit with CTRL-d).

Setting Up JsLint

Next you'll need to download the JsLint Javascript syntax checking library. JsLint is composed of one Javascript file: fulljslint.js.

Download it and put it somewhere handy, for example:

wget http://www.jslint.com/fulljslint.js
mv fulljslint.js /home/admin/bin/js

Running JsLint

Next you'll need to add a Javascript file which will implement JsLint, using the technique outlined by Ian Bicking.

For example, I could create a file called runjslint.js like this as /home/admin/bin/js/runjslint.js:

load('/home/admin/bin/js/fulljslint.js');
 
var body = arguments[0];
 
var result = JSLINT(body);
if (result) {
 print('All good.');
} else {
 print('Problems:');
}
print(JSLINT.report());

This file, when ran using Spidermonkey, will check the syntax of Javascript data passed as a command line argument.

Integrating with Vim

Next you'll need to add a line to your .vimrc script to allow you to enter a command for syntax checking.

Here's an example that enables me to syntax check by typing ":js".

cabbr js !js /home/admin/bin/js/runjslint.js "`cat %`"

Formatting JsLint's Results

Last, but not least, you may want to add this Python script to change JsLint's results from HTML/CSS to plain text. Put this script in an appropriate place, for example '/home/admin/bin/python/format_lint_output.py'.

#!/usr/bin/python
import sys
import re
 
def format_lint_line(line):
 line = line.replace('<p>', '\n')
 line = line.replace('&nbsp;', ' ')
 return line
 
def remove_html_tags(data):
 p = re.compile(r'<.*?>')
 return p.sub('', data)
 
for line in sys.stdin:
 print remove_html_tags(format_lint_line(line)),

Change your .vimrc file to use it as a filter.

For example:

cabbr js !js /home/admin/bin/js/runjslint.js "`cat %`" \| /home/admin/bin/python/format_lint_output.py

Add new comment | 2008-08-31 00:41

6 Responses

  1. Car classifieds (not verified) Says:
    2009-01-06 08:09

    Great code mate :) if you dont mind can you please convert this code in php?
    I need in php rather in html and aspx.
    thanks
    regards,
    Matt~

  2. Anonymous (not verified) Says:
    2008-12-08 14:27

    [url=http://www.trivy-system.com/Gaiyou.htm]身辺調査[/url]
    [url=http://www.trivy-system.com/Goriyou2.htm]妻浮気[/url]
    [url=http://www.trivy-system.com/Goriyou.htm]悩み相談[/url]
    [url=http://www.tantei-sc.com/]探偵紹介[/url]
    [url=http://www.trivy-system.com/]探偵事務所[/url]
    [url=http://www.trivy-system.com/soudan_f.html]行動調査[/url]
    [url=http://www.trivy-system.com/Gaiyou2.htm]追跡調査[/url]
    [url=http://www.akasaka-argus.com/]探偵 調査[/url]
    [url=http://www.akasaka-j.com/]素行調査[/url]
    [url=http://www.mames.jp/]自家焙煎コーヒー[/url]
    [url=http://www.5thavenue-ny.com/]シャネル　財布[/url]
    [url=http://www.fujitomi.co.jp/]先物取引[/url]
    [url=http://tours-en-lair.jp/]TAYA[/url]
    [url=http://tours-en-lair.jp/]スキンケア化粧品[/url]
    [url=http://www.ec-life.co.jp/garage/]ガレージ[/url]
    [url=http://www.tbnetjapan.com/medlegal/]医学論文翻訳[/url]
    [url=http://adultshop.co.jp/andropenis5.html]ペニス増大[/url]
    [url=http://www.clarity-b.info/]まつげエクステ　東京[/url]
    [url=http://www.kekkon-net.jp/special/chapel/futari.html]二人だけの結婚式[/url]
    [url=http://www.hotpowers.jp/]ホットパワーズ[/url]
    [url=http://fasciere.jp/]表参道　エステ[/url]
    [url=http://www.eyecosme.jp/]まつげ　エクステ[/url]
    [url=http://denwauranai-patio.com/]電話占い[/url]
    [url=http://www.nizikaikun.com/]結婚式[/url]
    [url=http://www.wac-up.com/]電報[/url]
    [url=http://www.kadoriku.com/]税理士　東京[/url]
    [url=http://www.yumeki.com/]カップリングパーティー[/url]
    [url=http://www.dh1.jp/]ウェルカムボード[/url]
    [url=http://www.kabu-net.com/]株式　情報[/url]
    [url=http://umanity.jp/]新潟競馬場[/url]
    [url=http://www.kid-k.jp/]大きな靴[/url]
    [url=http://www.j-payment.co.jp/service/marketing/seo.html]SEO[/url]
    [url=http://www.seo-by.jp/]モバイルSEO[/url]
    [url=http://www.seo-by.jp/]携帯SEO[/url]
    [url=http://seojuni.com/]順位チェック[/url]
    [url=http://l.andnail.com/index.php?id=193]結婚関連情報[/url]
    [url=http://l.andnail.com/][[PR]][/url]
    [url=http://www4.atpages.jp/urupower/]生活役立ち[/url]
    [url=http://s2.muryo-de.etowns.net/~redsky/]GooGoo[/url]
    [url=http://www.jpmkt01.com/]トゥグテョランダ[/url]
    [url=http://www.worldflower.net/pt/]鉢植え[/url]
    [url=http://www.clubwith.tv/?cn=L_MAIN_PC]カップリングパーティー[/url]
    [url=http://www.contact-eye.com/]コンタクト[/url]
    [url=http://tours-en-lair.jp/products/homeostasis/index.html]ホメオスタシス[/url]
    [url=http://www.hmp.jp/portal/new_release/]新作　av[/url]
    [url=http://www.worldflower.net/pv/]ブリザーブドフラワー[/url]
    [url=http://www.nicolas-dogs.com/]FX 初心者[/url]
    [url=http://www.aqua01.net/]FX 初心者[/url]
    [url=http://www.kabudayo.com/]FX　比較[/url]
    [url=http://www.tfdbeauty.jp/]ブライダル　エステ[/url]
    [url=http://telink.jp/]国際電話[/url]
    [url=http://www.sigmac.jp/]ホームページ製作　東京[/url]
    [url=http://www.tokei-biho.com/]オメガ　修理[/url]
    [url=http://ecommerce.j-payment.co.jp/]ec開発[/url]
    [url=http://itj.jp/hikaku/]決済比較[/url]

  3. Anonymous (not verified) Says:
    2008-08-31 19:25

    The next step would be making it integrate with Quickfix, I suppose. I do that with Python, so I type :make to syntax check my Python code.

  4. Reid (not verified) Says:
    2008-08-31 07:53

    eclim is a very weird project that tries to integrate vim with eclipse, but even if you don't use that, it comes bundled with integrated jslint checking. It's awesome. When you write out the file, it flags any lint errors in the file with a "sign" (type ":help signs").

    http://eclim.sf.net

  5. mde (not verified) Says:
    2008-09-07 02:57

    Very nice post, sir. Thanks for this.

    I just posted a bit on my blog about using Lynx instead to filter the HTML output into plaintext. Maybe prettier output than the Python script.

    Thanks again -- makes my JavaScripty day-to-day just a bit nicer.

    Matthew

  6. Andy (not verified) Says:
    2008-11-13 16:16

    This and other blog posts inspired me to come up with another method, so I altered the rhino version so that it works with spidermonkey as a pipe or redirect target. It's a bit more flexible, doesn't require html parsing, and a pantload faster than the Rhino version. Enjoy!

    http://whereisandy.com/code/jslint