AppCode 2017.2 Help

Using JavaScript Code Quality Tools

AppCode integrates with most popular JavaScript code linters. All these tools register themselves as AppCode 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 N/A to examine errors and apply suggested quick fixes. Learn more about inspections and intention actions at Code Inspection andIntention Actions.

On this page:

JSLint

  1. Open the JSLint page (File | Settings | Languages and Frameworks | JavaScript | Code Quality Tools | JSLint for Windows and Linux or AppCode | Preferences | Languages and Frameworks | JavaScript | Code Quality Tools | JSLint for macOS).
  2. Select the Enable check box. 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 check box next to it.

JSHint

  1. Open the JSHint page (File | Settings | Languages and Frameworks | JavaScript | Code Quality Tools | JSHint for Windows and Linux or AppCode | Preferences | Languages and Frameworks | JavaScript | Code Quality Tools | JSHint for macOS).
  2. Select the Enable check box. 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.

    AppCode 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 check box.

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

    • To configure verification manually, clear the check box and in the Options area select the check boxes 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 AppCode | Preferences | Languages and Frameworks | JavaScript | Code Quality Tools | Closure Linter for macOS).
  3. Select the Enable check box.
  4. Specify the path to the Closure Linter executable file:
    • /usr/local/bin/gjslint
  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 AppCode or in the command line mode.
When Closure Linter is running inside AppCode, 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

  1. Install and configure the Node.js runtime environment.
  2. Install and enable the NodeJS repository plugin on the Plugins page as described in Installing, Updating and Uninstalling Repository Plugins and Enabling and Disabling Plugins.

To install JSCS globally

  1. Open the built-in AppCode Terminal (press N/A or choose View | Tool Windows | Terminal on the main menu)
  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 AppCode | Preferences | Languages and Frameworks | JavaScript | Code Quality Tools | JSCS for macOS).
  2. Select the Enable check box. 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.

  4. In the JSCS Package field,

    specify the location of the jscs package installed in the current project.

  5. Appoint the configuration to use.

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

To install ESLint
Open the built-in AppCode Terminal (press N/A or choose View | Tool Windows | Terminal on the main menu) 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 AppCode | Preferences | Languages and Frameworks | JavaScript | Code Quality Tools | ESLint for macOS).
  2. Select the Enable check box. 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.

  4. In the ESLint Package field, specify the location of the eslint or standard package.
  5. Appoint the configuration to use.
    • If you choose Automatic search, AppCode looks for a .eslintrc file or tries to detect a configuration defined under eslintConfig in a package.json. AppCode 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.
  6. 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.
  7. 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 AppCode JavaScript code style settings. This integration makes it easier for you to configure the AppCode 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. AppCode 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 AppCode are applied, for example, indent, curly or no-trailing-spaces. Complex object options for these rules are not always applied. Also note that AppCode 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 AppCode ESLint integration. Learn more from JavaScript Standard Style Official website.

To install JavaScript Standard
Open the built-in AppCode Terminal (press N/A or choose View | Tool Windows | Terminal on the main menu) 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 (N/A), 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 check box, and specify the location of the standard package in the ESLint Package field.

Last modified: 13 December 2017

See Also