使用Create React App安装ESLint遇阻：无法生成JSON配置文件

问题根源 #

ESLint v8.21.0 及以上版本调整了 eslint --init 的默认行为，不再提供生成JSON格式配置文件的选项，只默认生成js/mjs格式配置，这是ESLint自身的版本变更，和Create React App兼容性无关。

解决办法 #

1. 手动创建JSON配置文件

直接在项目根目录新建 .eslintrc.json 文件，填入适配React+TypeScript的基础配置示例：

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "@typescript-eslint"
  ],
  "rules": {
    // 可根据需求添加自定义规则
  }
}

2. 强制通过命令生成JSON格式

执行 eslint --init 时添加格式指定参数，就能生成JSON配置文件：

npx eslint --init --config-format json

3. 避免CRA与手动安装ESLint的版本冲突

Create React App本身已内置ESLint，手动安装高版本依赖可能引发冲突，推荐按以下步骤修复：

• 卸载手动安装的ESLint相关依赖：

npm uninstall eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-react --save-dev

• 安装CRA官方适配的ESLint配置包：

npm install eslint-config-react-app --save-dev

• 新建 .eslintrc.json 并继承官方配置：

{
  "extends": "react-app"
}

内容的提问来源于stack exchange，提问作者Lucas Leão