Atom配置ReactJS的ESLint遇peer依赖警告及JSX报错问题

嘿，别慌！你完全不需要降级ESLint，咱们一步步来搞定这两个问题：

1. 先说说那个peer依赖警告 #

你装的eslint-plugin-react@7.7.0要求的peer依赖是eslint@^3.0.0 || ^4.0.0，而你当前的ESLint版本是4.19.1——这完全在要求的版本范围内啊！这个警告大概率是npm/yarn安装时的缓存问题，或者是临时的版本检测小bug。你可以试试这两步消除警告：

• 清理npm缓存：npm cache clean --force
• 卸载后重新安装相关包：

  npm uninstall eslint eslint-plugin-react
  npm install eslint@4.19.1 eslint-plugin-react@7.7.0 --save-dev
  

2. 解决JSX报错的关键：配置ESLint识别React语法 #

JSX代码报错，核心原因是ESLint还没被正确配置成能识别React的JSX语法。你需要在项目根目录创建（或修改）.eslintrc.json配置文件，添加React相关的规则和环境：

{
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": [
    "react"
  ],
  "rules": {
    // 这两个规则是确保ESLint能正确识别JSX的基础
    "react/jsx-uses-react": "error",
    "react/jsx-uses-vars": "error"
  }
}

另外，别忘了检查Atom里的ESLint插件状态：

• 打开Atom设置，找到linter-eslint插件，确认它是激活的
• 可以勾选插件设置里的Fix on save，让它自动修复一些可解决的ESLint错误

3. 最后几个小检查 #

• 确保项目根目录有package.json，ESLint会以此为基准识别项目配置
• 如果用yarn的话，看看yarn.lock里的版本和你安装的是否一致，必要时删掉yarn.lock重新安装依赖

做完这些，JSX的报错应该就消失了，peer依赖的警告也会解决，根本不需要降级ESLint哒！

内容的提问来源于stack exchange，提问作者Jamo