如何在WebStorm中为React项目接入ESLint并解决插件冲突？

Hey there! Let's tackle your two React + ESLint + WebStorm issues one by one:

Follow these straightforward steps to get ESLint up and running smoothly:

• Install ESLint Dependencies: First, install the necessary packages in your project. For JavaScript React projects, run:

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

  If you're using TypeScript, add TypeScript-specific plugins too:

  npm install eslint eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev
  

• Generate ESLint Config File: Run the initialization command to create your config file:

  npx eslint --init
  

  Follow the wizard prompts: select "React" as your project type, choose JavaScript/TypeScript, specify your environment (browser), and pick a style guide (like Airbnb, Standard, or custom). This will generate a .eslintrc.js (or other format) file in your project root.

• Enable ESLint in WebStorm: Open WebStorm settings (use Cmd+, on Mac or Ctrl+, on Windows), navigate to Languages & Frameworks > JavaScript > Code Quality Tools > ESLint. Check the Enable box, then select Automatic ESLint configuration—WebStorm will detect your project's ESLint setup automatically.

• Set Up Auto-Fix on Save: To streamline your workflow, go to Tools > Actions on Save and check both Reformat code and Fix ESLint problems. Now every time you save a file, WebStorm will auto-fix eligible ESLint issues.

This error occurs because WebStorm's ESLint plugin automatically scans parent directories for additional ESLint config files, while VSCode doesn't do this by default. You've got two conflicting configs: one in your project root (.eslintrc.js) and another in the parent directory (../.eslintrc). Here are actionable fixes:

Option 1: Mark Your Project as the ESLint Root #

Add root: true to your project's .eslintrc.js file. This tells ESLint to stop looking for configs in parent directories, prioritizing your project's own rules:

module.exports = {
  root: true, // Add this line at the top of your config
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended'
  ],
  // ... rest of your config
};

Option 2: Remove or Merge Conflicting Configs #

If the parent directory's .eslintrc isn't necessary for your project, simply delete it. If it's a shared config for multiple projects, merge its rules into your project's .eslintrc.js (you can use the extends array to reference it if needed).

Option 3: Force WebStorm to Use Your Project's Config Explicitly #

In WebStorm's ESLint settings (Languages & Frameworks > JavaScript > Code Quality Tools > ESLint), switch from "Automatic configuration" to Manual configuration. Then specify the full path to your project's .eslintrc.js file in the Configuration file field. This ensures WebStorm only uses that specific config.

Option 4: Update WebStorm's ESLint Plugin #

Occasionally, older versions of the ESLint plugin have bugs related to config resolution. Go to Settings > Plugins, find the ESLint plugin, and check for updates. Install any available updates and restart WebStorm.

For reference, here's the error stack you shared:

Error: Plugin "react" was conflicted between ".eslintrc.js" and "../.eslintrc".
at mergePlugins (/Users/account/Documents/web-km-client/node_modules/eslint/lib/cli-engine/config-array/config-array.js:202:19)
at createConfig (/Users/account/Documents/web-km-client/node_modules/eslint/lib/cli-engine/config-array/config-array.js:305:9)
at ConfigArray.extractConfig (/Users/account/Documents/web-km-client/node_modules/eslint/lib/cli-engine/config-array/config-array.js:481:33)
at CLIEngine.isPathIgnored (/Users/account/Documents/web-km-client/node_modules/eslint/lib/cli-engine/cli-engine.js:954:18)
at ESLintPlugin.invokeESLint (/Applications/WebStorm.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js:100:23)
at ESLintPlugin.getErrors (/Applications/WebStorm.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js:78:21)
at ESLintPlugin.onMessage (/Applications/WebStorm.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js:52:64)
at Interface. (/Applications/WebStorm.app/Contents/plugins/JavaScriptLanguage/jsLanguageServicesImpl/js-language-service.js:105:39)
at Interface.emit (events.js:315:20)
at Interface._onLine (readline.js:329:10)

内容的提问来源于stack exchange，提问作者Слава Иванов