JSLint on Mac + TextMate integration
UPDATE: Ryan Grove has a better script to display the JSLint results. So basically follow the instructions here until you get to Step 2, point 5 (where you write the command to run JSLint). Then head over to Ryan's blog post to get the better script.
JSLint is an indispensable tool if you're serious about your JavaScript code quality. You can run it online for curiosity but for real development it has to be part of your coding environment and just a click/keystroke away.
While on PC I integrated JSLint with my text editor of choice - TextPad - and shared here. Now, ladies and gentlemen...[drum roll] I give you...[bzfghgang!] JSLint on the Mac!
Prerequisite: get Rhino running on your OSX
Don't worry, it's pretty straightforward, described here
Step 1: get JSLint
The Rhino version of JSLint is here. It's just one JS file. Find an appropriate place to copy it, I think ~/Library/JSLint is as good as any.
$ mkdir ~/Library/JSLint $ curl http://jslint.com/rhino/jslint.js > ~/Library/JSLint/jslint.js
Test how it works from the command line:
$ java org.mozilla.javascript.tools.shell.Main ~/Library/JSLint/jslint.js myjavascript.js
Step 2: integrate with TextMate
TextMate extensions work their magic through the so called bundles. Here's what you do.
- Select menu: Bundles / Bundle Editor / Edit Commands...
- In the list of commands, expand JavaScript
- Click the + sign found under the list, select New Command
- type the name "jslint"
- Replace the contents of the Command(s) text field with
java org.mozilla.javascript.tools.shell.Main ~/Library/JSLint/jslint.js "$TM_FILEPATH"
- In the Input: dropdown select "Entire Document", in the Output: "Show as Tool Tip" or "Show as HTML"
- In Activation, click on Key Equivalent and then select a key combination you like, for example Command + L (L for Lint)
- And this is it, refer to the screenshot below to compare with what you just did. Close the bundle editor window and you're done
Now test your new shiny tool. Open a javascript file and press Command+L. Here's a sample output:
And after fixing the missing semi-colon:
This entry was posted on Saturday, February 21st, 2009 and is filed under JavaScript, mac, tools. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Get notification for future posts: follow me on Twitter or subscribe to my RSS feed
February 23rd, 2009 at 3:36 am
Thanks for this simple to follow tutorial.
Just one note: the Link to “get Rhino running on your OSX” is broken.
February 23rd, 2009 at 3:56 am
thanks bvt!
link fixed now.
I’m glad you liked the post
S
February 23rd, 2009 at 2:47 pm
[...] http://www.phpied.com/jslint-on-mac-textmate/ : un billet sur l’intégration de JSLint avec Textmate (un volontaire pour faire la même chose avec Vim ?) [...]
March 4th, 2009 at 10:15 am
Hi Stoyan,
Great tip! Not sure if you’re aware of it, but there is also a great TextMate bundle that includes JSLint, minification, compression, and auto-formatting. It’s called JavaScript tools, and it’s available on GitHub.
March 4th, 2009 at 12:21 pm
Thanks Karl, I didn’t know about this bundle, sounds pretty useful
March 19th, 2009 at 3:31 pm
Note that Javascript Lint and JSLint are different things. This is a great tip if you want to use *JSLint* in Textmate. JavaScript tools with Javascript Lint provides a little better experience, like validation the current text without having to save the file first. Still, if you are used to the validator at http://www.jslint.com this is really great. Thanks!
July 13th, 2009 at 6:27 pm
If you follow the instructions at http://www.pulletsforever.com/pulletsforever/Pullets_Forever_Blog/Entries/2009/7/12_Running_JSLint_with_Safaris_JavaScript_Core.html
You can then use the following command in TextMate to run JSLint using Safari’s JavaScript Core:
/System/Library/Frameworks/JavaScriptCore.framework/Versions/A/Resources/jsc ~/Library/JSLint/jslint.js — “$(cat $TM_FILEPATH)”
July 14th, 2009 at 1:52 am
Thanks David, this is really cool. I’m a sucker for typing code in consoles and having the Safari’s core console “for free” without the need for rhino is pretty sweet. Thanks for sharing!
July 27th, 2009 at 6:50 am
there’s also a fork of the JavaScript Tools TextMate Bundle which adds JSLint support: http://github.com/karbassi/javascript-tools.tmbundle/tree/master
July 28th, 2009 at 11:18 pm
Thanks Jan, looks cool!
July 29th, 2009 at 9:38 pm
[...] Enjoy command-line jslint. And if you develop using TextMate, I highly recommend integrating jslint into that as well. [...]
August 23rd, 2009 at 7:01 pm
You may also in interested in jslint4java, which bundles JSLint and rhino into a single jar file. This might be easier than getting rhino downloaded and working.
October 7th, 2009 at 7:09 am
[...] Stefanov wrote a helpful blog post describing how to create a simple TextMate bundle that allows you to quickly run the current file through JSLint, and validate your javascript code [...]
November 13th, 2009 at 1:11 am
Just noticed this one… SproutCore’s todos sample instructions include a link to their TextMate bundle which includes JSLint support… one really cool feature they included was overloading the command-s operator to get a quick JavaScript validation (just shows number of errors) whenever a file is saved.
This is very useful as I am forced to see the number of errors each time I save.
November 14th, 2009 at 1:04 am
Thanks for the comment, David. Overloading cmd+s is a very cool idea indeed.