JSLint on Mac + TextMate integration

February 21st, 2009. Tagged: JavaScript, mac, tools

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.

  1. Select menu: Bundles / Bundle Editor / Edit Commands...
  2. In the list of commands, expand JavaScript
  3. Click the + sign found under the list, select New Command
  4. type the name "jslint"
  5. Replace the contents of the Command(s) text field with
    java org.mozilla.javascript.tools.shell.Main ~/Library/JSLint/jslint.js "$TM_FILEPATH"
  6. In the Input: dropdown select "Entire Document", in the Output: "Show as Tool Tip" or "Show as HTML"
  7. In Activation, click on Key Equivalent and then select a key combination you like, for example Command + L (L for Lint)
  8. 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

textmate bundle editor

Now test your new shiny tool. Open a javascript file and press Command+L. Here's a sample output:

JSLint results in TextMate

And after fixing the missing semi-colon:

jslint fixed

Tell your friends about this post: Facebook, Twitter, Google+

29 Responses

  1. Thanks for this simple to follow tutorial.
    Just one note: the Link to “get Rhino running on your OSX” is broken.

  2. thanks bvt!

    link fixed now.

    I’m glad you liked the post

    S

  3. [...] 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 ?) [...]

  4. 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.

  5. Thanks Karl, I didn’t know about this bundle, sounds pretty useful

  6. 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!

  7. 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)”

  8. 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!

  9. there’s also a fork of the JavaScript Tools TextMate Bundle which adds JSLint support: http://github.com/karbassi/javascript-tools.tmbundle/tree/master

  10. Thanks Jan, looks cool!

  11. [...] Enjoy command-line jslint. And if you develop using TextMate, I highly recommend integrating jslint into that as well. [...]

  12. 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.

  13. [...] 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 [...]

  14. 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.

  15. Thanks for the comment, David. Overloading cmd+s is a very cool idea indeed.

  16. Thank you very much!

  17. Found this post on googling “textmate jslint”… I installed the SproutCore.tmbundle and automatically got the number of JSLint errors on each cmd+S, but was struggling to get detailed error information. Turns out the shortcut for that in TextMate is ctrl+shift+V. (See Bundles > SproutCore for all available options and keyboard shortcuts.)

  18. @ Floris … thats Javascript Lint, not JSLint : they are different!

  19. It’s not actually necessary to run JSLint through Rhino or JavaScriptCore. Since TextMate allows you to build a command that displays HTML, you can include JSLint using a script tag. I’ve built a bundle to demonstrate what’s possible with this method: http://github.com/voxwerk/JSLint.tmbundle

    Just download the bundle and either double-click the bundle or place it in “~/Library/Application\ Support/TextMate/Bundles/”, then just open a JavaScript file and press ⌃⇧V.

  20. That is probably the perfect article that ever cross my reference. I don’t see why anyone ought to disagree. It may be too simple #for them# to comprehend…anyway good work i’m coming back right here for Extra Nice Stuff!!

  21. Thank you for sharing a really nice article thank you for everything http://www.cozumonline.net/bilgisayar-bakim-sozlesmesi.html

  22. Doesn`t work for me.
    I installed Rhino successfully.
    Next I download jslint from https://github.com/douglascrockford/JSLint (because your link is broken).
    With command + L in textmate I got nothing although javascript have syntax error.
    Can you help me with this issue ?

  23. I’ve got the same issue, the link to the Rhino version of JSLint is broken

  24. Hello, great!

    Thanks updated a little bit to use nodejs lint with npm:
    https://github.com/reid/node-jslint

    You’ll need nodejs and npm, which is easy to install on OS X with homebrew:

    curl -L http://github.com/mxcl/homebrew/tarball/master | tar xz –strip 1 -C /usr/local
    brew install npm
    Then install:

    npm install http://github.com/reid/node-jslint/tarball/master
    You may also clone this repository then install in your working copy:

    npm install .
    This package isn’t yet in the npm registry. I’m working on it.

    jslint “$TM_FILEPATH”

    Thanks!

  25. Awesome TextMate command. I got it working on 10.6.8 OSX, here is the command.

    java org.mozilla.javascript.tools.shell.Main “$TM_FILEPATH”

    Works like a charm.

  26. Hello, Thanks for sharing. Your article seems very interesting. to the next for another

  27. The link to Rhino jslint.js leads to the 404 error – http://jslint.com/rhino/jslint.js

  28. Just desire to say your article is as astounding. The clarity in your submit is just nice and i can suppose you are a professional in this subject.
    Fine along with your permission let me to take hold of your feed to stay up to date with impending post.
    Thank you one million and please continue the gratifying work.

  29. You’re so interesting! I do not think I’ve read something like that before.
    So wonderful to discover another person with some original thoughts on this subject.
    Seriously.. thank you for starting this up. This site is one thing that is required on
    the internet, someone with a bit of originality!

Leave a Reply