PhpStorm 2017.3 Help

JavaScript Linters

PhpStorm integrates with most popular JavaScript code linters. All these tools register themselves as PhpStorm code inspections: they check JavaScript code for most common errors and potential problems without running the application. When a tool is activated, it launches automatically on the edited JavaScript file. Problems 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.

JSLint

  1. Open the JSLint page (File | Settings | Languages and Frameworks | JavaScript | Code Quality Tools | JSLint for Windows and Linux or PhpStorm | Preferences | Languages and Frameworks | JavaScript | Code Quality Tools | JSLint for macOS).
  2. Select the Enable checkbox. After that all the controls on the page become available.
  3. Define the set of common mistakes to check the code for. To enable a validation, select the checkbox next to it.

JSHint

  1. Open the JSHint page (File | Settings | Languages and Frameworks | JavaScript | Code Quality Tools | JSHint for Windows and Linux or PhpStorm | Preferences | Languages and Frameworks | JavaScript | Code Quality Tools | JSHint for macOS).
  2. Select the Enable checkbox. After that all the controls on the page become available.
  3. From the Version drop-down list, choose the version of the tool to apply.

    PhpStorm comes bundled with version 2.9.4, which is used by default. To download another version, choose it from the list.

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

      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 when no .jshintrc is found in the project, specify the default configuration file to use.

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

Closure Linter

Before you start with Closure Linter, download and install Python as described on the Python Official website.

  1. Download and install the Closure Linter tool.
  2. Open the Closure Linter page (File | Settings | Languages and Frameworks | JavaScript | Code Quality Tools | Closure Linter for Windows and Linux or PhpStorm | Preferences | Languages and Frameworks | JavaScript | Code Quality Tools | Closure Linter for macOS).
  3. Select the Enable checkbox.
  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.

When a configuration file is parsed before the gjslint process starts and all the parsed options are passed as arguments to the gjslint process, the behaviour of Closure Linter may slightly differ depending on whether it is run from PhpStorm or in the command line mode.
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

JSCS

Before you start
Install the Node.js runtime environment and configure it as a Node interpreter as described in Configuring Node.js Interpreters.

To install JSCS globally

  1. Open the built-in PhpStorm Terminal (Alt+F12)
  2. Type npm install jscs -g at the command prompt.

To activate and configure JSCS

  1. Open the JSCS page (File | Settings | Languages and Frameworks | JavaScript | Code Quality Tools | JSCS for Windows and Linux or PhpStorm | Preferences | Languages and Frameworks | JavaScript | Code Quality Tools | JSCS for macOS).
  2. Select the Enable checkbox. After that the controls on the page become available.
  3. In the Node Interpreter field, specify the Node.js interpreter to use. Choose one of the configured interpreters or click browseButton.png and configure a new one as described in Configuring Node.js Interpreters.
  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.

ESLint

ESLint brings a wide range of linting rules that can also be extended with plugins. PhpStorm shows warnings and errors reported by ESLint right in the editor, as you type. You can also use JavaScript Standard Style with ESLint.

Before you start
Install the Node.js runtime environment and configure it as a Node interpreter as described in Configuring Node.js Interpreters.

To install ESLint
Open the built-in PhpStorm Terminal (Alt+F12) and at the command prompt type npm install eslint --save-dev or npm install eslint -g.
Optionally, install additional plugins, for example, eslint-plugin-react to lint React applications.

To activate and configure ESLint

  1. Open the ESLint page (File | Settings | Languages and Frameworks | JavaScript | Code Quality Tools | ESLint for Windows and Linux or PhpStorm | Preferences | Languages and Frameworks | JavaScript | Code Quality Tools | ESLint for macOS).
  2. Open the ESLint page (PhpStorm | Preferences | Languages and Frameworks | JavaScript | Code Quality Tools | ESLint).
  3. Select the Enable checkbox. After that the controls on the page become available.
  4. In the Node Interpreter field, specify the Node.js interpreter to use. Choose one of the configured interpreters or click browseButton.png and configure a new one as described in Configuring Node.js Interpreters.
  5. In the ESLint Package field, specify the location of the eslint or standard package.
  6. Appoint the configuration to use.
    • If you choose Automatic search, PhpStorm looks for a .eslintrc file or tries to detect a configuration defined under eslintConfig in a package.json. PhpStorm first looks for a .eslintrc or package.json in the folder with the file to be linted, then in its parent folder, and so on up to the project root. If the search fails, ESLint uses its default embedded configuration file.
    • Choose Configuration File to use a custom file and specify the file location in the Path field.
  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.
  8. 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.

Importing Code Style from ESLint

You can import some of the ESLint code style rules to the PhpStorm JavaScript code style settings. This integration makes it easier for you to configure the PhpStorm code formatter so it no longer breaks properly formatted code from the ESLint perspective.

To import ESLint code style rules
Open an .eslintrc JSON file or a package.json with the eslintConfig field. PhpStorm shows the question Apply code style from ESLint? at the top of the editor. Click Yes to apply the matched rules to the Project code style scheme.

ws_import_code_style_from_eslint_white.png

Please note that only the rules that have matching code style settings in PhpStorm are applied, for example, indent, curly or no-trailing-spaces. Complex object options for these rules are not always applied. Also note that PhpStorm does not apply rules from the configuration files listed in the extends field or rules from plugins.

JavaScript Standard Style

You can set JavaScript Standard Style as default JavaScript code style for your application so its main rules are applied when you type the code or reformat it. Since Standard is based on ESLint, you can also use Standard via the PhpStorm ESLint integration. Learn more from JavaScript Standard Style Official website.

To install JavaScript Standard
Open the built-in PhpStorm Terminal (Alt+F12) and type npm install standard --save-dev at the command prompt. See also JavaScript Standard Style: Installation.

To set the JavaScript Standard Style as default
Open the Code Style. JavaScript page (in the Settings/Preferences dialog (Ctrl+Alt+S), choose Editor | Code Style | JavaScript), click Set from, and then choose Predefined Style | JavaScript Standard Style. The style will replace your current scheme.

To enable linting with Standard via ESLint
Open the ESLint page as described above, select the Enable checkbox, and specify the location of the standard package in the ESLint Package field.

Last modified: 3 November 2017

See Also