IntelliJ IDEA 14.0.0 Web Help

Using JavaScript Code Quality Tools

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

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

All these tools 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 reported in pop-up information windows, a pup-window appears when you hover the mouse pointer over a stripe in the Validation sidebar.

On this page:

Enabling and configuring the built-in JSLint tool

  1. Open the Settings dialog box by choosing File | Settings .

    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 dialog box by choosing File | Settings .

    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.

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

      Starting with IntelliJ IDEA 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 dialog box by choosing File | Settings .

    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. Select the Enable check box. After that all the controls in the page become available.
  5. Specify the path to the <Python_home>\Scripts\gslint.exe file and the previously created configuration file.

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 IntelliJ IDEA, but it is available from the JetBrains plugin repository. Once enabled, the plugin is available at the IDE level, that is, you can use it in all your IntelliJ IDEA projects. See Installing, Updating and Uninstalling Repository Plugins and Enabling and Disabling Plugins for details.

Installing JSCS

  1. Open the project settings by choosing File | Settings or pressing Ctrl+Alt+S, see Accessing Settings for details. Then click Node.js and NPM under the Languages & Frameworks node.
  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.

Activating and configuring JSCS

  1. Open the Settings dialog box by choosing File | Settings .

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

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 IntelliJ IDEA, but it is available from the JetBrains plugin repository. Once enabled, the plugin is available at the IDE level, that is, you can use it in all your IntelliJ IDEA projects. See Installing, Updating and Uninstalling Repository Plugins and Enabling and Disabling Plugins for details.

Installing ESLint

  1. Open the project settings by choosing File | Settings or pressing Ctrl+Alt+S, see Accessing Settings for details. Then click Node.js and NPM under the Languages & Frameworks node.
  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.

Activating and configuring ESLint

  1. Open the Settings dialog box by choosing File | Settings .

    Expand the JavaScript node under Languages&Frameworks, and then click ESLint 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 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, IntelliJ IDEA first looks for a .eslintrc configuration file. IntelliJ IDEA 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 IntelliJ IDEA look for a .eslintrc file, choose the Search for config(s) option. If no .eslintrc file is found, 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.

See Also

Last modified: 4 December 2014
comments powered by Disqus