ESLINT
intelliJ install + error codes

https://clickety-clack.click/img/eslint.html

ESLintUltimate

Last modified: 20 April 2021

IntelliJ IDEA integrates with ESLint which brings a wide range of linting rules that can also be extended with plugins. IntelliJ IDEA 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, see Configure linting scope.

Before you start

1. Download and install Node.js.

2. Make sure a local Node.js interpreter is configured in your project: open the Settings/Preferences dialog ⌘, and go to Languages and Frameworks | Node.js and NPM. The Node Interpreter field shows the default project Node.js interpreter.

   Learn more from Configuring a local Node.js interpreter.

Install ESLint

1. In the embedded Terminal (⌥F12), type one of the following commands:

   • npm install --g eslint for global installation.
   • npm install --save-dev eslint to install ESLint as a development dependency.

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

$ npm install eslint-plugin-react --save-dev

$ npm install eslint --save-dev

$ npm install eslint-plugin-react --save-dev

  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ]

{
  "settings": {
    "react": {
      "createClass": "createReactClass", // Regex for Component Factory to use,
                                         // default to "createReactClass"
      "pragma": "React",  // Pragma to use, default to "React"
      "fragment": "Fragment",  // Fragment to use (may be a property of <pragma>), default to "Fragment"
      "version": "detect", // React version. "detect" automatically picks the version you have installed.
                           // You can also use `16.0`, `16.3`, etc, if you want to override the detected value.
                           // default to latest and warns if missing
                           // It will default to "detect" in the future
      "flowVersion": "0.53" // Flow version
    },
    "propWrapperFunctions": [
        // The names of any function used to wrap propTypes, e.g. `forbidExtraProps`. If this isn't set, any propTypes wrapped in a function will be skipped.
        "forbidExtraProps",
        {"property": "freeze", "object": "Object"},
        {"property": "myFavoriteWrapper"}
    ],
    "linkComponents": [
      // Components used as alternatives to <a> for linking, eg. <Link to={ url } />
      "Hyperlink",
      {"name": "Link", "linkAttribute": "to"}
    ]
  }
}

{
  "plugins": [
    "react"
  ]
}

{
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  }
}

  "rules": {
    "react/jsx-uses-react": "error",
    "react/jsx-uses-vars": "error",
  }

{
  "extends": ["eslint:recommended", "plugin:react/recommended"]
}

{
  "plugins": [
    "react"
  ],
  "extends": ["eslint:all", "plugin:react/all"]
}

import React from 'react';
import Header from './components/Header';const App = () => {
    return (
        <div>
            <Header />
        </div>
    );
};export default App;

1:8  warning  'React' is defined but never used   no-unused-vars
2:8  warning  'Header' is defined but never used  no-unused-vars

"extends": [
    "eslint:recommended",
    "plugin:react/recommended"
]

import Blank from './';

3:8  warning  'Blank' is defined but never used  no-unused-vars

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "lint": "eslint src/**/*.js src/**/*.jsx"
}

Activate and configure ESLint in IntelliJ IDEA

By default, ESLint is disabled. You can choose to configure it automatically or specify all the configuration settings manually.

Configure ESLint automatically

With automatic configuration, IntelliJ IDEA uses the ESLint package from the project node_modules folder and the .eslintrc.* configuration file from the folder where the current file is stored. If no .eslintrc.* is found in the current file folder, IntelliJ IDEA 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, IntelliJ IDEA 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/Preferences dialog ⌘,, go to Languages and 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 Settings | Settings for New Projects), go to Languages and 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/Preferences dialog ⌘,, go to Languages and 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 IntelliJ IDEA 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 IntelliJ IDEA-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.

4. Choose the configuration to use.

   • Automatic search– select this option if ESLint rules are configured in your 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.

     IntelliJ IDEA looks for a .eslintrc.* file or for a eslintConfig property in a package.json. IntelliJ IDEA 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.

5. 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.

Configure linting scope

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

2. 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}
     

     Copied!

   • 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}
     

     Copied!

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

Fix problems automatically on save

ESLint can fix the detected problems every time your changes are saved either manually, with ⌘S, or automatically, when you launch a run/debug configuration, or close IntelliJ IDEA, or perform version control actions, see Autosave for details.

• Open the Settings/Preferences dialog ⌘,, go to Languages and Frameworks | JavaScript | Code Quality Tools | ESLint, and select the Run eslint –fix on save checkbox.

Lint your code

When installed and enabled, ESLint activates automatically every time you open a JavaScript file.

By default, IntelliJ IDEA marks detected problems based on the severity levels from the ESLint configuration. See Configuring ESLint highlighting to learn how to override these settings.

Descriptions of the errors detected in the current file and quick-fixes for them are available from the editor and from the Current File tab of the Problems tool window.

Errors in all previously opened files and quick-fixes for them are shown in the Project Errors tab of the Problems tool window. To open the tool window, click the Inspection widget in the upper-right corner of the editor:

See View problems and apply quick-fixes in the editor and Problems tool window for details.

View problems and apply quick-fixes in the editor

• To view the description of a problem, hover over the highlighted code.

  

  To resolve the detected problem, click ESLint: Fix '' or press ⌥⇧↩.

  To resolve all the detected problems in the current file, click More actions (⌥⏎) and select ESLint: Fix current file from the list.

  

  See View problems and apply quick-fixes in the editor for details.

• Alternatively open the Current File tab of the Problems tool window ⌘6, where you can view problem descriptions, apply quick-fixes, navigate to the fragments in the source code where errors occurred, as well as fix them in the Editor Preview pane without leaving the tool window. Learn more from Problems tool window.

• You can also configure ESLint to fix all the problems in a file when this file is saved. To configure such behavior, select the Run eslint –fix on save checkbox on the ESLint page of the Settings dialog as described in Activating and configuring ESLint in IntelliJ IDEA.

Lint your code in the Problems tool window

To open the Problems tool window, click the Inspections widget in the upper-right corner of the editor.

Alternatively select View | Tool windows | Problems from the main menu or press ⌘6.

The Project Errors tab shows the errors in all files that were opened during the current session, with error messages grouped by files in which they were detected.

Here you can view problem descriptions, apply quick-fixes, navigate to the fragments in the source code where errors occurred, as well as fix them in the Editor Preview pane without leaving the tool window. Learn more from Problems tool window.

Configure highlighting for ESLint

By default, IntelliJ IDEA marks the detected errors and warnings based on the severity levels from the ESLint configuration. For example, errors are highlighted with a red squiggly line, while warnings are marked with a yellow background. See Code inspections and Change inspection severity for details.

Change the severity level of a rule in the ESLint configuration

• In .eslintrc or under eslintConfig in package.json, locate the rule you want to edit and set its ID to 1 warn or to 2 error.

  Learn more from the ESLint official website.

You can override the severities from the ESLint configuration so that IntelliJ IDEA ignores them and shows everything reported by the linter as errors, warnings, or in a custom color.

Ignore the severity levels from the configuration

1. In the Settings/Preferences dialog ⌘,, select Editor | Inspections. The Inspections page opens.

2. In the central pane, go to JavaScript | Code quality tools | ESLint.

3. In the right-hand pane, clear the Use rule severity from the configuration file checkbox and select the severity level to use instead of the default one.

   

Import code style from ESLint

You can import some of the ESLint code style rules to the IntelliJ IDEA JavaScript code style settings. That enables IntelliJ IDEA to use more accurate code style options for your project when auto-completing, generating, or refactoring the code or adding import statements. When you use the Reformat action, IntelliJ IDEA will then no longer break properly formatted code from the ESLint perspective.

IntelliJ IDEA understands ESLint configurations in all official formats: .eslintrc JSON files, package.json files with the eslintConfig field, as well as JavaScript and YAML configuration files.

• When you open your project for the first time, IntelliJ IDEA imports the code style from the project ESLint configuration automatically.

• If your ESLint configuration is updated (manually or from your version control), open it in the editor and choose Apply ESLint Code Style Rules from the context menu.

  

  Alternatively, just answer Yes to the "Apply code style from ESLint?" question on top of the file.

  

  The list of applied rules is shown in the Event log tool window:

  

Use 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 IntelliJ IDEA ESLint integration.

Install JavaScript Standard

• In the embedded Terminal (⌥F12), type:

  npm install standard --save-dev

  Learn more from the JavaScript Standard Style official website.

Enable linting with Standard via ESLint

If you open a project where standard is listed in the project's package.json file, IntelliJ IDEA enables linting with Standard automatically.

1. In the Settings/Preferences dialog ⌘,, go to Languages and Frameworks | JavaScript | Code Quality Tools | ESLint.
2. On the ESLint page that opens, select Manual ESLint configuration and specify the location of the standard package in the ESLint Package field.

Set the JavaScript Standard Style as default

1. In the Settings/Preferences dialog ⌘,, go to Editor | Code Style | JavaScript.
2. On the Code Style. JavaScript page that opens, click Set from, and then select JavaScript Standard Style. The style will replace your current scheme.

• ESLint U
• Before you start
• Install ESLint
• Activate and configure ESLint in IntelliJ IDEA
• Lint your code
• Configure highlighting for ESLint
• Import code style from ESLint
• Use JavaScript Standard Style

https://www.jetbrains.com/help/idea/linters.html#ws_js_linters_general_problems_tool_window

JavaScript lintersUltimate

Last modified: 08 March 2021

IntelliJ IDEA integrates with ESLint and other most popular JavaScript code linters that detect problems in your code without executing it.

When installed and enabled, a linter activates automatically every time you open a JavaScript file, reports detected errors and warnings, and suggests quick-fixes where possible.

Descriptions of the errors detected in the current file and quick-fixes for them are available from the editor and from the Current File tab of the Problems tool window.

Errors in all previously opened files and quick-fixes for them are shown in the Project Errors tab of the Problems tool window. To open the tool window, click the Inspection widget in the upper-right corner of the editor:

See View problems and apply quick-fixes in the editor and Problems tool window for details.

View problems and apply quick-fixes in the editor

1. In the editor, hover the mouse pointer over the highlighted problem. IntelliJ IDEA shows a tooltip with a description of the problem.

   

   To resolve the problem, click : Fix '' or press ⌥⇧↩.

2. To resolve all the detected problems in the current file, click More actions (⌥⏎) and select : Fix current file from the list.

   

   Alternatively, press ⌥⏎ and choose the relevant suggestion from the list.

Problems tool window

To open the Problems tool window, click the Inspections widget in the upper-right corner of the editor.

Alternatively select View | Tool windows | Problems from the main menu or press ⌘6.

The Problems tool window consists of two tabs:

• The Current File tab shows the errors detected in the file from the active editor tab.

  

• The Project Errors tab shows the errors in all previously opened files, with error messages grouped by files in which they were detected.

  

For each error IntelliJ IDEA shows a brief description and the number of the line where the error occurred. From an error message, you can navigate to the code where the problem occurred, or apply a quick-fix, or fix the problem manually in the Editor Preview pane ( ).

• To open the Problems tool window, click the Inspections widget in the upper-right corner of the editor.

   

  Alternatively select View | Tool windows | Problems from the main menu or press ⌘6.

• To view suggested quick-fixes for a problem, select the corresponding error message and then select Show Quick Fixes from its context menu, or click on the toolbar, or just press ⌥⏎.

  To fix a problem, select the appropriate quick-fix from the list.

  

• Alternatively, click to open the Editor Preview pane and fix the problem manually there, without leaving the tool window.

  

  Gif

• To resolve the detected problems in the whole file, select : Fix current file from the context menu.

• To navigate to the place where an error occurred, double-click the corresponding error message, or select Jump to Source from its context menu, or just press ⌘↓.

• You can also edit the linter's settings, suppress a rule in the statement where a problem occurred or in the whole file, as well as exclude the current file from analysis at all. See Disable and suppress inspections for details.

  

• To filter out error messages by their severity and customize their sorting, click and select or clear the relevant items in the list.

  

  Gif

• To copy an error message, select Copy Problem Description from its context menu or press ⌘C.

https://www.jetbrains.com/help/idea/debugging-javascript-in-chrome.html#debug_workers

Debug JavaScript in ChromeUltimate

Last modified: 25 March 2021

IntelliJ IDEA provides a built-in debugger for your client-side JavaScript code that works with Chrome. The video and the instructions below walk you through the basic steps to get started with this debugger.

Before you start

• Make sure the JavaScript Debugger bundled plugin is enabled on the Settings/Preferences | Plugins page, see Managing plugins for details.

Debugging an application running on the built-in server

IntelliJ IDEA has a built-in web server that can be used to preview and debug your application. This server is always running and does not require any manual configuration. All the project files are served on the built-in server with the root URL http://localhost:/, with respect to the project structure.

Start debugging

1. Set the breakpoints in the JavaScript code, as required.

2. Open the HTML file that references the JavaScript to debug or select the HTML file in the Project tool window.

3. From the context menu of the editor or the selection, choose Debug <HTML_file_name>. IntelliJ IDEA generates a debug configuration and starts a debugging session through it. The file opens in the browser, and the Debug tool window appears.

    

   To save the automatically generated configuration for further re-use, choose Save <HTML_file_name> from the context menu after the debugging session is over.

4. In the Debug tool window, proceed as usual: step through the program, stop and resume the program execution, examine it when suspended, view actual HTML DOM, run JavaScript code snippets in the Console, and so on..

 

By default, a debugging session starts in a new window with a custom Chrome user data. To open a new Chrome instance with your familiar look-and-feel, configure Chrome in IntelliJ IDEA to start with your user data, see Starting a debugging session with your default Chrome user data for details.

Example

Suppose you have a simple application that consists of an index.html file and an index.js file, where index.html references index.js. To start debugging this application using the built-in server, open index.html in the editor and choose Debug 'index.html' from the context menu:

IntelliJ IDEA creates a run/debug configuration automatically, and a debugging session starts:

To restart the new run/debug configuration, click in the upper right-hand corner of the IntelliJ IDEA window or choose Run | Debug from the main menu:

Debugging an application running on an external web server

Often you may want to debug client-side JavaScript running on an external development web server, for example powered by Node.js.

Start debugging

1. Set the breakpoints in the JavaScript code, as required.

2. Run the application in the development mode. Often you need to run npm start for that.

   When the development server is ready, copy the URL address at which the application is running in the browser – you will need to specify this URL address in the run/debug configuration.

3. Create a debug configuration of the type JavaScript Debug: from the main menu, select Run | Edit Configuration, click on the toolbar and select JavaScript Debug from the list. In the Run/Debug Configuration: JavaScript Debug dialog that opens, specify the URL address at which the application is running. This URL can be copied from the address bar of your browser as described in Step 2 above. Click OK to save the configuration settings.

4. Select the newly created configuration from the Select run/debug configuration list on the toolbar and click next to the list. The URL address specified in the run configuration opens in the browser and the Debug tool window appears.

5. In the Debug tool window, proceed as usual: step through the program, stop and resume the program execution, examine it when suspended, view actual HTML DOM, run JavaScript code snippets in the Console, and so on..

See Debugging React Applications and Debugging Angular Applications for examples.

Debugging asynchronous code

IntelliJ IDEA supports debugging asynchronous client-side JavaScript code. IntelliJ IDEA recognizes breakpoints inside asynchronous code, stops at them, and lets you step into such code. As soon as a breakpoint inside an asynchronous function is hit or you step into asynchronous code, a new element Async call from <caller> is added in the Frames pane of the Debugger tab. IntelliJ IDEA displays a full call stack, including the caller and the entire way to the beginning of the asynchronous actions.

The image below shows an example of a JavaScript debugging session.

The debugger stops at line3(breakpoint), then at line5(breakpoint). On clicking Step into, the debugger will stop at line5 (on function ), then will move to line6.

The asynchronous debugging mode is turned on by default. To disable asynchronous stack traces, set js.debugger.async.call.stack.depth in Registry to 0.

Debugging workers

IntelliJ IDEA supports debugging Service Workers and Web Workers. IntelliJ IDEA recognizes breakpoints in each worker and shows the debug data for it as a separate thread in the Frames pane on the Debugger tab of the Debug tool window.

Note that IntelliJ IDEA can debug only dedicated workers, debugging for shared workers is currently not supported.

1. Set the breakpoints in the Workers to debug.

2. If you are using Service Workers, make sure the Allow unsigned requests checkbox on the Debugger page is selected. Otherwise your service workers may be unavailable during a debug session:

   

3. Create a debug configuration of the type JavaScript Debug as described above in Debugging client-side JavaScript running on an external web server.

4. Select the newly created configuration from the Select run/debug configuration list on the toolbar and click Debug .

   The HTML file specified in the run configuration opens in the chosen browser and the Debug tool window opens with the Frames list showing all the Workers:

   

    

   To examine the data (variables, watches, and so on) for a Worker, select its thread in the list and view its data in the Variables and Watches panes. When you select another Worker, the contents of the panes are updated accordingly.

https://eslint.org/docs/rules/

Rules

Rules in ESLint are grouped by category to help you understand their purpose.

No rules are enabled by default. The "extends": "eslint:recommended" property in a configuration file enables rules that report common problems, which have a check mark below.

The --fix option on the command line automatically fixes problems (currently mostly whitespace) reported by rules which have a wrench below.

Possible Errors

These rules relate to possible syntax or logic errors in JavaScript code:

Best Practices

These rules relate to better ways of doing things to help you avoid problems:

Strict Mode

These rules relate to strict mode directives:

Variables

These rules relate to variable declarations:

Stylistic Issues

These rules relate to style guidelines, and are therefore quite subjective:

ECMAScript 6

These rules relate to ES6, also known as ES2015:

Deprecated

These rules have been deprecated in accordance with the deprecation policy, and replaced by newer rules:

Removed

These rules from older versions of ESLint (before the deprecation policy existed) have been replaced by newer rules: