WebStorm 2026.2 Help

ESLint

WebStorm integrates with ESLint which brings a wide range of linting rules that can also be extended with plugins. WebStorm shows warnings and errors reported by ESLint right in the editor, as you type. With ESLint, you can also use JavaScript Standard Style as well as lint your TypeScript code.

Besides JavaScript and TypeScript, ESLint can be applied to files of other types in the entire project or in its specific parts, refer to Configure linting scope.

Before you start

  • Make sure you have Node.js on your computer.

Install ESLint

  1. In your command-line shell or in the embedded Terminal (Alt+F12) , type one of the following commands:

    • npm init @eslint/config@latest to install ESLint in the current project and generate a configuration file.

      Answer the questions of the wizard. As a result, WebStorm installs the latest version of ESLint and generates a eslint.config.js configuration file.

    • npm install --save-dev eslint to install ESLint as a development dependency.

    • npm install --g eslint for global installation.

    • pnpm create @eslint/config@latest to install ESLint in the current project and generate a configuration file.

      Answer the questions of the wizard. As a result, WebStorm installs the latest version of ESLint and generates a eslint.config.js configuration file.

    • pnpm add -D eslint to install ESLint as a development dependency.

    • pnpm add -g eslint for global installation.

    • yarn create @eslint/config to install ESLint in the current project and generate a configuration file.

      Answer the questions of the wizard. As a result, WebStorm installs the latest version of ESLint and generates a eslint.config.js configuration file.

    • yarn add -D eslint to install ESLint as a development dependency.

    • yarn add eslint for global installation.

  2. Optionally, install additional plugins, for example, eslint-plugin-react to lint React applications.

Learn more from the ESLint official website.

Configuration file

Supported formats of configuration files

Depending on the ESLint version you are using, WebStorm recognizes configurations in the following file types:

ESLint version 9 and later

eslint.config.js, eslint.config.mjs, eslint.config.cjs (flat format), eslint.config.ts, eslint.config.mts, or eslint.config .cts. Learn more from the ESLint official website.

ESLint version 8 and earlier

  • .eslintrc.* (.eslintrc, .eslintrc.json, or .eslintrc.yaml file, or a file in another supported format).

  • .eslintignore

  • package.json with a eslintIgnore or a eslintConfig property. This configuration system is deprecated, learn more from the ESLint official website.

Learn how to switch to the flat format from ESLint configuration migration guide.

Create and edit a configuration file

  • Open a configuration file or create a new one in the root of your project. Populate the configuration file depending on the ESLint version you are using:

    // @ts-check import eslint from '@eslint/js'; import tseslint from 'typescript-eslint'; export default tseslint.config( eslint.configs.recommended, tseslint.configs.recommended, );

    Learn more from the ESLint official website.

    /* eslint-env node */ module.exports = { extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'], parser: '@typescript-eslint/parser', plugins: ['@typescript-eslint'], root: true, };

    Learn more from the ESLint official website.

Configure ESLint in WebStorm

By default, ESLint is configured automatically. You can choose to specify all the configuration settings manually or disable ESLint.

Configure ESLint automatically

With automatic configuration, WebStorm uses the ESLint package from the project node_modules folder and the configuration file from the folder where the current file is stored. If no configuration file is found in the current file folder, WebStorm will look for one in its parent folders up to the project root.

If you have several package.json files with ESLint listed as a dependency, WebStorm starts a separate process for each package.json and processes everything below it. This lets you apply a specific ESLint version or a specific set of plugins to each path in a monorepo or a project with multiple ESLint configurations.

  • To configure ESLint automatically in the current project, open the Settings dialog (Ctrl+Alt+S) , go to Languages & Frameworks | JavaScript | Code Quality Tools | ESLint, and select the Automatic ESLint configuration option.

  • To configure ESLint automatically in all new projects, open the Settings for New Projects dialog (File | New Projects Setup | Settings for New Projects) , go to Languages & Frameworks | JavaScript | Code Quality Tools | ESLint, and select the Automatic ESLint configuration option.

Configure ESLint manually

With manual configuration, you can use a custom ESLint package, configuration file, and working directories, as well as apply various additional rules and options.

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

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

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

    By default, the field is empty, and WebStorm detects the working directory automatically. First, it looks for a directory closest to the linted file which contains a configuration file.

    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 WebStorm-specific project metadata is stored). For example:

      1. ./: use the project base directory as the ESLint process working directory.

      2. client;server: use <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.

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

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

    • Glob patterns that define relative paths to the working directories. For example, with **/foo -* each directory with the name starting with