类组件state直接赋值触发Eslint解析错误，求解决方案及配置指引

一、解决"Parsing error: Unexpected token ="问题 #

类字段语法（即state = { count: 1 }这种写法）需要ESLint使用Babel解析器来支持，默认的Espree解析器无法正确识别该语法，按以下步骤修复：

1. 安装依赖 #

执行命令安装Babel ESLint解析器：

npm install --save-dev @babel/eslint-parser @babel/core

2. 修改.eslintrc.json配置 #

添加解析器及相关配置，同时调整extends顺序确保Prettier规则优先级：

{
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "ecmaVersion": 2022,
    "sourceType": "module",
    "babelOptions": {
      "presets": ["react-app"]
    }
  },
  "extends": [
    "airbnb",
    "airbnb/hooks",
    "eslint:recommended",
    "plugin:jsx-a11y/recommended",
    "prettier"
  ],
  "env": {
    "browser": true,
    "node": true,
    "es2022": true,
    "jest": true
  },
  "rules": {
    "react/react-in-jsx-scope": 0,
    "react-hooks/rules-of-hooks": "error",
    "no-console": 0,
    "react/state-in-constructor": 0,
    "indent": 0,
    "linebreak-style": 0,
    "react/prop-types": 0,
    "jsx-a11y/click-events-have-key-events": 0,
    "prettier/prettier": [
      "error",
      {
        "trailingComma": "es5",
        "singleQuote": true,
        "printWidth": 100,
        "tabWidth": 4,
        "semi": true,
        "endOfLine": "auto"
      }
    ]
  },
  "plugins": ["prettier", "react", "react-hooks"]
}

3. 统一ESLint配置来源 #

删除package.json中的eslintConfig字段，避免和.eslintrc.json冲突，确保ESLint只读取.eslintrc.json的配置。

二、ESLint与Prettier正确配置要点 #

1. 依赖清单
   确保devDependencies包含以下包：

{
  "devDependencies": {
    "@babel/core": "^7.22.0",
    "@babel/eslint-parser": "^7.22.0",
    "eslint": "^8.24.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.6.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.31.8",
    "eslint-plugin-react-hooks": "^4.6.0",
    "prettier": "2.7.1"
  }
}

2. 核心配置原则

• extends中prettier必须放在最后，用于覆盖所有和Prettier冲突的ESLint规则
• 使用@babel/eslint-parser支持最新JS语法及React特有的语法糖
• 通过prettier/prettier规则直接定义Prettier格式规范，也可单独创建.prettierrc文件，二者取其一即可

3. 验证配置
   执行以下命令检查代码格式并自动修复：

npx eslint . --fix

三、说明 #

类字段语法属于ES2022正式规范，但ESLint默认的Espree解析器对部分语法的支持滞后，且React项目通常依赖Babel进行转译，因此使用@babel/eslint-parser能确保ESLint和项目的转译规则一致，避免解析错误。

内容的提问来源于stack exchange，提问作者Iqbal Hossain Emon