WebStorm 2017.1 Help

JavaScript Code Quality Tools

WebStorm provides facilities to run JavaScript-specific code quality inspections through integration with the following code verification tools:

  • JSLint. The tool is bundled with WebStorm.
  • JSHint. WebStorm comes bundled with the default version of the tool, but you can have an alternative version downloaded.
  • Closure Linter. The tool is not bundled with WebStorm, so you need to download it yourself.
  • JSCS. The tool is not bundled with WebStorm, but you can install it from the WebStorm interface using the Node Package Manager (npm).
  • ESLint. The tool is not bundled with WebStorm, but you can install it from the WebStorm interface using the Node Package Manager (npm).

All these tools register themselves as WebStorm code inspections: they check JavaScript code for most common mistakes and discrepancies without running the application. When a tool is activated, it launches automatically on the edited JavaScript file. Discrepancies are highlighted and reported in pop-up information windows, a pop-up window appears when you hover the mouse pointer over a stripe in the Validation sidebar. You can also press Alt+Enter to examine errors and apply suggested quick fixes. Learn more about inspections and intention actions at Code Inspection and Intention Actions.

On this page:

Enabling and configuring the built-in JSLint tool

  1. Open the Settings / Preferences Dialog by pressing Ctrl+Alt+S or by choosing File | Settings for Windows and Linux or WebStorm | Preferences for macOS.

    Expand the JavaScript node under Languages & Frameworks, and then click JSLint under Code Quality Tools.

  2. On the JSLint page that opens, select the Enable check box. After that all the controls in the page become available.
  3. Define the set of common mistakes to check the code for. To enable a validation, select the check box next to it.

Enabling and configuring JSHint

  1. Open the Settings / Preferences Dialog by pressing Ctrl+Alt+S or by choosing File | Settings for Windows and Linux or WebStorm | Preferences for macOS.

    Expand the JavaScript node under Languages & Frameworks, and then click JSHint under Code Quality Tools.

  2. On the JSHint page that opens, select the Enable check box. After that all the controls in the page become available.
  3. From the Version drop-down list, choose the version of the tool to apply.

    WebStorm comes bundled with version 1.0.0, which is used by default. WebStorm provides the ability to download another version, which is not bundled. Actually, the alternative version is downloaded only once, whereupon it is available without download.

  4. Configure the behaviour of JSHint:
    • To have the code verified according to the rules from a previously created configuration file, select the Use config files check box.

      A configuration file is a JSON file with the extension .jshintrc that specifies which JSHint options should be enabled or disabled. WebStorm will look for a .jshintrc file in the working directory. If the search fails, WebStorm will search in the parent folder, then again in the parent folder. The process is repeated until WebStorm finds a .jshintrc or reaches the project root. To have WebStorm still run verification in this case, specify the default configuration file to use.

      Starting with WebStorm version 6.0.1, the globals setting in .jshintrc is supported. For earlier versions, a Predefined (, separated)" tree node is displayed in the bottom of the tree in the UI.

    • To configure verification manually, clear the check box and define the set of common mistakes to check the code for in the Options area. The controls in the area fall into two groups:
      • Enforcing options: select the check boxes in this group to enable very strict behaviour of the verification tool and thus allow only safe JavaScript.
      • Relaxing options: select/clear the check boxes in this area to suppress warnings when certain types of discrepancies are detected.
      • Environments: select/clear these check boxes to specify for which environments you want global properties predefined.
      To enable a validation, select the check box next to it.

Enabling and configuring Closure Linter

  1. Download and install the Closure Linter tool.
  2. Open the Settings / Preferences Dialog by pressing Ctrl+Alt+S or by choosing File | Settings for Windows and Linux or WebStorm | Preferences for macOS.

    Expand the JavaScript node under Languages & Frameworks, and then click Closure Linter under Code Quality Tools.

  3. On the Closure Linter page that opens, select the Enable check box. After that all the controls in the page become available.
  4. Specify the path to the Closure Linter executable file:
    • <Python_home>\Scripts\jslint.exe for Windows
    • /usr/local/bin/gjslint for Linux and macOS
  5. Specify the path to the previously created configuration file.

Note that the behaviour of Closure Linter may slightly differ depending on whether it is run from WebStorm or in the command line mode if a configuration file is parsed before the gjslint process started and all the parsed options are passed as arguments to the gjslint process. When Closure Linter is running inside WebStorm, the gjslint process is launched in the following way:

/path/to/gjslint --flagfile /path/to/config_file --recurse=no /path/to/user_source_file.js
Therefore, the following command fails if the configuration file has a space instead of a =:
--jslint_error indentation

Using JSCS

The JSCS tool is run through NodeJS, therefore make sure the NodeJS framework is downloaded and installed on your computer. The framework also contains the Node Package Manager(npm) through which JSCS is installed.

Integration with NodeJS and NPM is supported through the NodeJs plugin. The plugin is bundled with WebStorm and activated by default. If the plugin is not activated, enable it on the Plugins page of the Settings / Preferences Dialog as described in Enabling and Disabling Plugins.

To install JSCS:

  1. Open the Settings / Preferences Dialog by pressing Ctrl+Alt+S or by choosing File | Settings for Windows and Linux or WebStorm | Preferences for macOS, and click Node.js and NPM under Languages & Frameworks.
  2. On the Node.js and NPM page that opens, the Packages area shows all the Node.js-dependent packages that are currently installed on your computer, both at the global and at the project level. Click /help/img/idea/2017.1/new.png.
  3. In the Available Packages dialog box that opens, select the jscs package and click Install Package.

    Learn more about installing tools through NPM in Node Package Manager (npm).

To activate and configure JSCS:

  1. Open the Settings / Preferences Dialog by pressing Ctrl+Alt+S or by choosing File | Settings for Windows and Linux or WebStorm | Preferences for macOS.

    Expand the JavaScript node under Languages & Frameworks, and then click JSCS under Code Quality Tools.

  2. Select the Enable check box to activate JSCS. After that the controls in the dialog box become available.
  3. In the Node Interpreter field, specify the NodeJS installation home. Type the path to the NodeJS executable file manually, or click the browseButton.png button and select the location in the dialog box, that opens.
  4. In the JSCS Package field, specify the location of the jscs package installed in the current project, see Installing JSCS.
  5. Appoint the configuration to use.

    By default, WebStorm first looks for a jscsConfig property in the package.json file of the current project. If no such property is found, WebStorm looks for a .jscsrc or a .jscs.json configuration file. WebStorm starts the search from the folder where the file to be checked is stored, then searches in the parent folder, and so on until reaches the project root. Accordingly, you have to define the configuration to apply either as a jscsConfig property in the package.json file or in a .jscsrc or a .jscs.json configuration file, or in a custom JSON configuration file.

    You can also apply a predefined set of rules, either independently or in combination with a configuration file. In the latter case, the rules from the configuration file override the predefined rules.

    • To have WebStorm look for a jscsConfig property in the package.json file or for a .jscsrc or a .jscs.json file, choose the Search for config(s) option.
    • To use a custom file, choose the Configuration File option and specify the location fo the file in the Path field. Choose the path from the drop-down list, or type it manually, or click the /help/img/idea/2017.1/browseButton.png button and select the relevant file from the dialog box that opens.
    • To have a predefined set or rules applied, choose the desired set from the Code Style Preset drop-down list.
  6. If necessary, from the Code Style Preset drop-down list, choose the set of predefined rules associated with the code style you use.

Using ESLint

The ESLint tool is run through NodeJS, therefore make sure the NodeJS framework is downloaded and installed on your computer. The framework also contains the Node Package Manager(npm) through which ESLint is installed.

Integration with NodeJS and NPM is supported through the NodeJS plugin. The plugin is bundled with WebStorm and activated by default. If the plugin is not activated, enable it on the Plugins page of the Settings / Preferences Dialog as described in Enabling and Disabling Plugins.

To install ESLint, open the WebStorm built-in Terminal (View | Tool Windows | Terminal or press Alt+F12) and at the command line prompt type npm install eslint --save-dev to install the package in the current project or npm install eslint --global to install the package globally.
You can also install the package on the Node.js and NPM page as described in Node Package Manager (npm).
Learn more on the ESLint official website.

To activate and configure ESLint:

  1. Open the Settings / Preferences Dialog by pressing Ctrl+Alt+S or by choosing File | Settings for Windows and Linux or WebStorm | Preferences for macOS.

    Expand the JavaScript node under Languages & Frameworks, and then click ESLint under Code Quality Tools.

  2. Select the Enable check box to activate ESLint. After that the controls in the dialog box become available.
  3. In the Node Interpreter field, specify the NodeJS installation home. Type the path to the NodeJS executable file manually, or click the browseButton.png button and select the location in the dialog box, that opens.
  4. In the ESLint Package field, specify the location of the eslint package installed in the current project, see Installing ESLint or the standard package installed in your project or globally, see Installing JavaScript Standard.
  5. Appoint the configuration to use.

    By default, WebStorm first looks for a .eslintrc configuration file. WebStorm starts the search from the folder where the file to be checked is stored, then searches in the parent folder, and so on until reaches the project root. If no .eslintrc file is found, ESLint uses its default embedded configuration file. Accordingly, you have to define the configuration to apply either in a .eslintrc configuration file, or in a custom JSON configuration file, or rely on the default embedded configuration.

    • To have WebStorm look for a .eslintrc file, choose the Search for .eslintrc option. If no .eslintrc file is found, the default embedded configuration file will be used.
    • To use a custom file, choose the Configuration File option and specify the location fo the file in the Path field. Choose the path from the drop-down list, or type it manually, or click the /help/img/idea/2017.1/browseButton.png button and select the relevant file from the dialog box that opens.
  6. If necessary, in the Additional Rules Directory field, specify the location of the files with additional code verification rules. These rules will be applied after the rules from .eslintrc or the above specified custom configuration file and accordingly will override them.
  7. If necessary, in the Extra ESLint Options field, specify additional command line options to run ESLint with using spaces as separators. See ESLint Command Line Interface Options for details.

Using JavaScript Standard Style

WebStorm supports JavaScript Standard Style.

To install Standard, open the WebStorm built-in Terminal (View | Tool Windows | Terminal or press Alt+F12) and at the command line prompt type npm install standard --save-dev to install the package in the current project or npm install standard --global to install the package globally.
You can also install the package on the Node.js and NPM page as described in Node Package Manager (npm).
Learn more on the ESLint official website. See also JavaScript Standard Style: Installation.

To configure WebStorm code style options for JavaScript to follow the main rules Standard declares so they are applied when you type the code or reformat it, open the Code Style. JavaScript page (File | Settings | Editor | Code Style | JavaScript for Windows and Linux or WebStorm | Preferences | Editor | Code Style | JavaScript for macOS), click Set from, and then choose Predefined Style | JavaScript Standard Style. The style will replace your current scheme.

Since Standard is based on ESLint, you can use Standard via WebStorm ESLint integration. To enable linting with Standard open the ESLint page as described above, select the Enable check box, and specify the location of the standard package in the ESLint Package field.

If you open a new project that already uses Standard and has it listed in the project's package.json file, WebStorm will detect that and enable linting with Standard automatically.

See Also

Last modified: 17 July 2017