遵循Mobx文档创建Store类时首个类属性出现ESLint解析错误的排查求助

这个问题的核心是ESLint默认的解析器不支持类字段初始化语法（也就是你写的firstGivesError = []这种类属性直接赋值的写法）。虽然你在parserOptions里设置了ecmaVersion: 12（ES2022已经正式包含类字段规范），但Airbnb的ESLint配置和默认的Espree解析器组合下，并没有自动开启对这个语法的支持，导致解析失败。

至于为什么只有第一个属性报错，其实是ESLint在遇到第一个解析错误后，中断了对后续代码的完整语法检查——并不是后面的写法没问题，只是错误提示没触发而已。

下面是具体的解决步骤：

1. 安装必要的Babel相关依赖 #

我们需要用@babel/eslint-parser替代默认解析器，它能借助Babel兼容最新的JavaScript语法：

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

2. 更新ESLint配置文件 #

修改你的.eslintrc.json，替换解析器并配置Babel相关选项：

{ 
  "env": { 
    "browser": true, 
    "es2021": true 
  }, 
  "extends": [ 
    "plugin:react/recommended", 
    "airbnb" 
  ], 
  "parser": "@babel/eslint-parser", // 替换为Babel解析器
  "parserOptions": { 
    "ecmaFeatures": { 
      "jsx": true 
    }, 
    "ecmaVersion": 12, 
    "sourceType": "module",
    "babelOptions": {
      "presets": ["@babel/preset-env"] // 启用env预设以支持类字段语法
    }
  }, 
  "plugins": [ 
    "react" 
  ], 
  "rules": { 
  } 
}

如果你已经有单独的Babel配置文件（比如.babelrc或babel.config.json），可以在其中添加@babel/preset-env，这样ESLint配置里的babelOptions可以省略，它会自动读取你的Babel配置。

做完这些配置后，重启ESLint服务（或者编辑器的ESLint插件），应该就能正常解析类字段语法了。

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