Lint your JavaScript with JSLint/JSHint in real time

This is a cross-post from WebStorm & PhpStorm blog, originally posted by Maxim Mossienko.

Do you have a habit running JSLint or JSHint for your JavaScript code? If you do not have it because the running is tedious, then IDE can help you with it while you edit the code. Here is how.

Open Settings, type JSLint, enable the code quality tool, configure options. Hit OK.

Here you go, the errors from JSLint appear in your editor.

Develop with pleasure!

About Andrey Cheptsov

Andrey Cheptsov is IntelliJ IDEA product marketing manager at JetBrains. He's passionate about productivity, programming languages and tools.
This entry was posted in New Features and tagged , , . Bookmark the permalink.

20 Responses to Lint your JavaScript with JSLint/JSHint in real time

  1. Francis says:

    I was wondering if it is possible to export the lint settings from one Intellij to another. I am trying to set up coding standards for my team and while we can export the general “Code Style” attributes, no where can I find a way of exporting the JSLint and JSHint settings.

    Cheers,
    Francis

  2. SergeySimonchik says:

    JSHint settings are stored in ${PROJECT_DIR}/.idea/jsLinters/jshint.xml .
    JSLint settings are stored in ${PROJECT_DIR}/.idea/jsLinters/jslint.xml .
    To import|export settings via File->(Import|Export) Settings… please vote http://youtrack.jetbrains.com/issue/WI-11087 .

    • Jordan says:

      There is no “jsLinters” folder in my .idea directory…did they remove this in the latest version of WebStorm? Where can we find/export the settings now?

  3. Steve Mosley says:

    (Sorry might not be the best place to ask this) Am I correct in thinking that IntelliJ contains everything that Webstorm does? Trying to decide whether I’ll need to buy both (I’m using Webstorm now for web stuff, but might move to IntelliJ for my Java stuff as well.)

  4. SergeySimonchik says:

    Steve, you are correct. IntelliJ contains everything that WebStorm does. Additionally WebStorm has Node.js and JsTestDriver plugins, but in IntelliJ IDEA (and other products) you can install these plugins for free from the Plugin Repository.

  5. Sumit says:

    Is it possible to have Rubymine (I assume is in the same boat as IntelliJ to have all the same webstorm features) use the jshint comment we place at the top of all of our javascript files for its linting rules?

  6. Louis says:

    I can’t find JSLint in my settings – is there a plugin or something that I’m missing?

  7. Andrea Verlicchi says:

    It would be very nice to have the chance to enable the “smarttabs” option of jshint to avoid errors when doing a comment like the following:

    /*
    * JSHint will mark this as an error
    * (mixed spaces and tabs)
    * ———————————–
    */

    Because the 2nd, 3rd, 4th and 5th lines begin with tab + 1 space.
    Can you make more options available in the jshint config window (including smarttabs)?
    Thank you.

  8. Andrea Verlicchi says:

    Ok the tabs and spaces were trimmed from my previous comment, but I assure you they were there! :D

    In characters:

    →/*
    → * JSHint will mark this as an error
    → * (mixed spaces and tabs)
    → * ———————————–
    → */

    This should do the trick :)

  9. SergeySimonchik says:

    Andrea, “smarttabs” support will be included in Idea 12 Leda.

  10. SergeySimonchik says:

    Louis, make sure you have IntelliJ IDEA 11.1.2 Ultimate Edition.
    Open Settings dialog and select “JavaScript” -> “Code Quality Tools”. There should be JSLint and JSHint items.
    No additional plugins are required.

  11. SergeySimonchik says:

    Sumit, you can configure “Ruby File Header”. Open Settings dialog, select “File Templates”, click “Includes” tab.

  12. Florian says:

    We have several JS-Files that will be combined later to a single File. The Problem with Linting now is that he complains about not defined Varaibles/Namespaces that actualy are defined in another file.
    Is there a way to tell jsLint to watch a complete Folder of Files?

  13. Bryan says:

    Is it possible to update the version of JSHint being used?

  14. pitti says:

    Yes, same questions as Bryan. The version of JSHint in Webstorm is kind of old. Ho can we update it?

  15. Robert says:

    regarding the jshint question, you can disable the error message about mixed spaces and tabs on multi-line comments by doing

    /*jshint smarttabs: true */ at the top of your javascript file.

  16. Uzza says:

    There should be a possibility to open tab in some panel to see list of JSLint errors, I don’t want to scroll trough entire file looking for bugs…

    I like WebStorm, but sometime its pretty hard to find something.

    • Jordan says:

      Uzza, you *can* see JSLint errors…just run a code inspection and it will apply your JSLint rules to the file you select (or a package, or the whole project!) and then give you a tab with all the errors listed under the header “Code quality tools” (sub-header “JSLint” or “JSHint”). What more are you looking for?

  17. Friebel says:

    I agree with Uzza… now I still have to use jshint online to view a list… damn

  18. Stephen M Carlson says:

    you should use a JSHint config file.. .jshintrc which you can share among your development team. Simply put the file in your project root and in your JSHint preferences check the box to “Use Config Files”.

    This makes IntelliJ look for a file named “.jshintrc” where all of the config flags are set. You can Google “jshintrc sample” and find lots of samples of how to create this file.

    Using a config file is nice because you can include it in your repo and then everyone on your team is syncing the latest copy and working with the same JSHint config.

    Also consider using a “.jshintignore” file for directory exclusion.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>