ESLint

In the Settings/Preferences dialog Ctrl+Alt+S, go to Languages and Frameworks | JavaScript | Code Quality Tools | ESLint, and select Manual ESLint configuration.

In the ESLint package field, specify the location of the eslint or standard package.

In the Working directories field, specify the working directories for the ESLint process.

By default the field is empty and PhpStorm detects the working directory automatically. First it looks for a directory closest to the linted file which contains a .eslintignore or .eslintrc.* file, or a package.json file with either a eslintIgnore or a eslintConfig property.

If the auto-detected working directory doesn't match your project configuration, you need to specify the working directory (directories) manually. Use semicolons as separators. The acceptable values are:

• Absolute paths.

• Paths relative to the project base directory (the parent folder of the .idea folder where PhpStorm-specific project metadata is stored). For example:

  • ./ - use project base directory as ESLint process working directory.

  • client;server - use the <project_base_dir>/client and <project_base_dir>/server as working directories. For files that are neither under the client not under the server folder, the working directory will be auto-detected as described above.

  • packages/* - each subfolder of the <project_base_dir>/packages folder will be used as the working directory for the corresponding linted files.

• Paths relative to the content roots can be used if some linted files are not under project base directory in the folder hierarchy.

• Glob patterns that define relative paths to the working directories. For example, with **/foo -* each folder with the name starting with foo- will be used as the working directory for the corresponding linted files.

Choose the configuration to use.

• Automatic search - select this option if ESLint rules are configured in a package.json or in a .eslintrc.* file. This can be a .eslintrc, .eslintrc.json, or .eslintrc.yaml file, or a file in another supported format, see the ESLint official website for details.

  PhpStorm looks for a .eslintrc.* file or for a eslintConfig property in a package.json. PhpStorm starts the search from the folder where the file to be checked is stored, then searches in its parent folder, and so on until the project root is reached.

• Configuration File - select this option to use a custom file and specify the file location in the Path field.

Learn more about configuring ESLint from the ESLint official website.

Optionally:

• In the Extra eslint options field, specify additional command-line options to run ESLint with, use spaces as separators.

  Learn more about ESLint CLI options from the ESLint official website.

• 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 package.json, .eslintrc.*, or a custom configuration file and accordingly will override them.

  See the ESLint official website for more information about ESLint configuration files and adding rules.

Open the Settings/Preferences dialog Ctrl+Alt+S, go to Languages and Frameworks | JavaScript | Code Quality Tools | ESLint, and select Automatic ESLint configuration or Manual ESLint configuration.

In the Run for files field, specify the pattern that defines the set of files to be linted. You can accept the default pattern or type a custom one.

With the default pattern, {**/*,*}.{js,ts,jsx,tsx,html,vue}, ESLint will wake up and process any updated JavaScript, TypeScript, JSX, TSX, HTML, or Vue file. To lint files of other types or files stored in specific folders, use glob patterns to update the default pattern.

• For example, to automatically reformat CoffeeScript files as well, add coffee to the default pattern as follows:

  {**/*,*}.{js,ts,jsx,tsx,html,vue,coffee}

• To lint files from a specific folder, replace {**/*,*} with <path to the folder>*.

  Suppose, you have a project with the following structure:

  

  To lint only the files in the coffee folder, update the pattern as follows:

  coffee/*.{js,ts,jsx,tsx,html,vue,coffee}

  As a result, the file linting.coffee will be linted while no_linting.coffee will not.