Make Intellij IDEA handle global JS variables defined in ESLint config

Question

I define some global variables in my project's .eslintrc, and this config file is detected correctly by ESLint when I run ESLint as a script.

Now, I would like to configure IntelliJ IDEA so that its JavaScript inspector notices that I have defined these global variables in .eslintrc, and doesn't bother me with "Missing import statement" warnings for these variables.

For example, both ReactDOM and React are global variables defined in my .eslintrc, so I would like the warnings in this screenshot to disappear:

FYI, the JavaScript language version selected in the project settings is "React JSX (JSX in ECMAScript 6)".

As far as I know, ESlint is configured correctly in the settings:

What am I missing?

(I am using the currently latest version of IntelliJ IDEA: 2016.3.4)

Answer 1

ESLint configuration doesn't affect IDEA own inspections; you need to suppress 'Missing Import statement' inspection using Alt+Enter, Right, 'Suppress for statement';

there is a feature request to respect env and globals from .eslintrc - see https://youtrack.jetbrains.com/issue/WEB-21957

Answer 2

You can turn off the inspections by hand that generate the above message. The one you are looking for is found here:

• Go to preferences, and select Editor > Inspections
• Type "missing" in the search field
• Click the "collapse all" icon next to the search field and find the root node of JavaScript (with the ▶︎ in front)
• Under "General" is "Missing import statement"; Uncheck it
• You might want to uncheck others..

If you use a well configured eslint and .editorconfig you arguably don't need IDEA's own inspections for Javascript at all. I have it setup like this:

• Backup your project .idea folder (it's hidden, found in the root of your project)
• Go to preferences, and select Editor > Inspections
• Click the "collapse all" icon next to the search field and find the root node of JavaScript (with the ▶︎ in front)
• Click the checkbox directly to the right of it, so all JavaScript inspections are OFF
• Now scroll down a bit until you see Code quality tools and ESlint
• Select the checkbox to the right. Now ESLint is your only active JS inspection.
• In the top-left of the Preferences window, type editorconfig and make sure you have the plugin active, together with an .editorconfig file.
• Apply and OK