使Intellij IDEA处理ESLint配置中定义的全局JS变量

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