PhpStorm 2016.2 Help

Using JavaScript Code Quality Tools

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

  • JSLint. The tool is bundled with PhpStorm.
  • JSHint. PhpStorm 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 PhpStorm, so you need to download it yourself.
  • JSCS. The tool is not bundled with PhpStorm, but you can install it from the PhpStorm interface using the Node Package Manager (npm).
  • ESLint. The tool is not bundled with PhpStorm, but you can install it from the PhpStorm interface using the Node Package Manager (npm).

All these tools register themselves as PhpStorm 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 PhpStorm | Preferences for OS X.

    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 PhpStorm | Preferences for OS X.

    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.

    PhpStorm comes bundled with version 1.0.0, which is used by default. PhpStorm 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. PhpStorm will look for a .jshintrc file in the working directory. If the search fails, PhpStorm will search in the parent folder, then again in the parent folder. The process is repeated until PhpStorm finds a .jshintrc or reaches the project root. To have PhpStorm still run verification in this case, specify the default configuration file to use.

      Starting with PhpStorm 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 PhpStorm | Preferences for OS X.

    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 OS X
  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 PhpStorm 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 PhpStorm, 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 not bundled with PhpStorm, but it can be installed from the JetBrains plugin repository as described in Installing, Updating and Uninstalling Repository Plugins and 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 PhpStorm | Preferences for OS X, 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 add.
  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 Installing and Removing External Software Using Node Package Manager.

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 PhpStorm | Preferences for OS X.

    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, PhpStorm first looks for a jscsConfig property in the package.json file of the current project. If no such property is found, PhpStorm looks for a .jscsrc or a .jscs.json configuration file. PhpStorm 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 PhpStorm 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 browseButton 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 JSCS is installed.

Integration with NodeJS and NPM is supported through the NodeJS plugin. The plugin is not bundled with PhpStorm, but it can be installed from the JetBrains plugin repository as described in Installing, Updating and Uninstalling Repository Plugins and Enabling and Disabling Plugins.

To install ESLint:

  1. Open the Settings / Preferences Dialog by pressing Ctrl+Alt+S or by choosing File | Settings for Windows and Linux or PhpStorm | Preferences for OS X, 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 add.
  3. In the Available Packages dialog box that opens, select the eslint package and click Install Package.

    Learn more about installing tools through NPM in Installing and Removing External Software Using Node Package Manager.

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 PhpStorm | Preferences for OS X.

    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.
  5. Appoint the configuration to use.

    By default, PhpStorm first looks for a .eslintrc configuration file. PhpStorm 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 PhpStorm 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 browseButton 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.

See Also

Last modified: 24 November 2016