React类组件state赋值语法触发ESLint解析错误咨询

嘿，这个问题我之前也碰到过！你用的类字段语法（就是直接在类里写state = { ... }）确实是个替代构造函数绑定的便捷写法，但ESLint默认解析规则可能没跟上。不过别担心，未弹出的create-react-app（CRA）其实已经内置了支持这个语法的ESLint配置，只是VS Code里的ESLint插件可能没正确识别而已。

下面是具体的解决步骤：

• 第一步：检查并调整自定义ESLint配置（如果有的话）
  如果你的项目根目录有自己创建的.eslintrc或.eslintrc.json文件，可能会和CRA内置的配置冲突。你可以直接修改它，让它继承CRA的官方配置：

  {
    "extends": "react-app"
  }
  

  要是没有自定义的ESLint配置文件，直接跳到下一步即可。

• 第二步：让VS Code使用项目本地的ESLint版本
  全局安装的ESLint版本可能偏旧，不支持类字段语法。你可以在VS Code里设置优先使用项目node_modules里的ESLint：

  1. 打开VS Code设置（快捷键Ctrl+, 或Cmd+,）
  2. 搜索ESLint: Use Local Eslint，勾选这个选项
     这样VS Code就会加载CRA自带的ESLint版本，它已经配置好支持类字段语法了。

• 第三步：重启ESLint服务
  配置修改后通常需要重启ESLint服务才能生效：
  按Ctrl+Shift+P（Windows）或Cmd+Shift+P（Mac）打开命令面板，输入ESLint: Restart ESLint Server，选择该命令重启服务。

做完这些步骤后，那个指向state = {里等号的ESLint错误应该就消失了。本质上是因为CRA的eslint-config-react-app已经集成了@babel/eslint-parser，并开启了对类字段语法的支持，只要让VS Code的ESLint插件正确识别这个配置就行。

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