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!

Comments below can no longer be edited.

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

  1. Avatar

    Francis says:

    May 30, 2012

    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.


  2. Avatar

    SergeySimonchik says:

    June 5, 2012

    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 .

    • Avatar

      Jordan says:

      January 6, 2014

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

    Steve Mosley says:

    June 7, 2012

    (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. Avatar

    SergeySimonchik says:

    June 14, 2012

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

    Sumit says:

    June 19, 2012

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

    Louis says:

    July 1, 2012

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

  7. Avatar

    Andrea Verlicchi says:

    July 8, 2012

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

    Andrea Verlicchi says:

    July 8, 2012

    Ok the tabs and spaces were trimmed from my previous comment, but I assure you they were there! πŸ˜€

    In characters:

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

    This should do the trick πŸ™‚

  9. Avatar

    SergeySimonchik says:

    July 9, 2012

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

  10. Avatar

    SergeySimonchik says:

    July 9, 2012

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

    SergeySimonchik says:

    July 9, 2012

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

  12. Avatar

    Florian says:

    September 17, 2012

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

    Bryan says:

    September 25, 2012

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

  14. Avatar

    pitti says:

    October 9, 2012

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

  15. Avatar

    Robert says:

    October 10, 2012

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

    Uzza says:

    October 29, 2013

    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.

    • Avatar

      Jordan says:

      January 6, 2014

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

    Friebel says:

    November 23, 2013

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

  18. Avatar

    Stephen M Carlson says:

    January 29, 2014

    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.

  19. Avatar

    Priyanka R says:

    November 3, 2014

    can you explain about JSHint Best Practice Recommendation

  20. Avatar

    Prakash S says:

    June 10, 2016

    How can i configure it for only the new files..
    My project is large and has legacy code..
    So i want to use only for new files…

Discover more