«
»

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.

  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

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

26 Responses to “JSLint on Mac + TextMate integration”

  1. bvt Says:
    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.

  2. Stoyan Says:
    February 23rd, 2009 at 3:56 am

    thanks bvt!

    link fixed now.

    I’m glad you liked the post

    S

  3. Dev Blog AF83 » Blog Archive » Veille technologique (x2) : Annonces, Contenus, Conférences, Méthodes, Agilité, Développment, Langages, Editeurs, Outils, Bases de données, Protocoles, Bibliothèques, SEO, Ergonomie, etc. Says:
    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 ?) [...]

  4. Karl Swedberg Says:
    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.

  5. Stoyan Says:
    March 4th, 2009 at 12:21 pm

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

  6. Anders Says:
    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!

  7. David W Keith Says:
    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)”

  8. Stoyan Says:
    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!

  9. Jan Berkel Says:
    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

  10. Stoyan Says:
    July 28th, 2009 at 11:18 pm

    Thanks Jan, looks cool!

  11. jonathanjulian.com » rake jslint Says:
    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. [...]

  12. Dominic Mitchell Says:
    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.

  13. jslint interpreter for textmate | Dejan Ranisavljevic Says:
    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 [...]

  14. David W Keith Says:
    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.

  15. Stoyan Says:
    November 14th, 2009 at 1:04 am

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

  16. Pierre Spring Says:
    June 30th, 2010 at 3:53 pm

    Thank you very much!

  17. Floris Huetink Says:
    October 22nd, 2010 at 4:23 am

    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. orka Says:
    November 13th, 2010 at 9:23 pm

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

  19. voxwerk Says:
    December 2nd, 2010 at 8:57 am

    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. Chriss Says:
    December 5th, 2010 at 1:48 pm

    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. Leick Says:
    January 8th, 2011 at 2:51 am

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

  22. Stoyan Says:
    January 12th, 2011 at 2:57 pm

    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. Sebastiano Armeli Says:
    January 27th, 2011 at 8:13 am

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

  24. Alexey Says:
    April 20th, 2011 at 7:44 am

    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. Scott Haines Says:
    August 30th, 2011 at 6:53 pm

    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. Fata Says:
    January 20th, 2012 at 7:33 am

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

Leave a Reply