PyCharm 2017.1 Help

Using JavaScript Code Quality Tools

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

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

All these tools register themselves as PyCharm 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 PyCharm | 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 PyCharm | 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.

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

      Starting with PyCharm 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 PyCharm | 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 PyCharm 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 PyCharm, 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 PyCharm, 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 PyCharm | 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 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 PyCharm | 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, PyCharm first looks for a jscsConfig property in the package.json file of the current project. If no such property is found, PyCharm looks for a .jscsrc or a .jscs.json configuration file. PyCharm 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 PyCharm 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 not bundled with PyCharm, 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, open the PyCharm 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 Installing and Removing External Software Using Node Package Manager.
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 PyCharm | 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, PyCharm first looks for a .eslintrc configuration file. PyCharm 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 PyCharm 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

PyCharm supports JavaScript Standard Style.

To install Standard, open the PyCharm 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 Installing and Removing External Software Using Node Package Manager.
Learn more on the ESLint official website. See also JavaScript Standard Style: Installation.

To configure PyCharm 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 PyCharm | 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 PyCharm 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, PyCharm will detect that and enable linting with Standard automatically.

See Also

Last modified: 26 July 2017