在 React 项目中正确安装并配置 ESLint 与 Prettier（Airbnb）

你当前的配置不存在功能性问题，可正常完成 React 代码的规范校验与格式化，核心逻辑和社区通用的 Airbnb + ESLint + Prettier 方案一致，仅存在冗余配置和可优化点。

依赖部分 #

• 所有包均安装在开发依赖中，且采用本地安装而非全局安装，符合最佳实践
• 版本匹配：ESLint 7.x 对应 eslint-config-airbnb 18.x、Prettier 2.x，不存在版本兼容问题
• 依赖完整：覆盖了 Airbnb 配置要求的全部对等依赖（import、jsx-a11y、react、react-hooks 插件），以及 ESLint 和 Prettier 的衔接包

ESLint 配置部分 #

• 继承规则顺序正确：Prettier 相关规则必须放在 extends 数组最后，才能正确覆盖所有 ESLint 中和 Prettier 冲突的格式规则，你的顺序符合要求
• 环境变量、解析器配置适配浏览器端 ESM 规范的 React 项目，Jest 环境配置可在有测试需求时保留
• 自定义的 JSX 文件后缀规则生效正常
• 可优化点：
  • 重复声明：plugin:react/recommended 已自动注册 react 插件，plugin:prettier/recommended 已自动注册 prettier 插件，且默认开启 prettier/prettier: error 规则，无需在 plugins 和 rules 中重复编写
  • 未显式开启 React Hooks 推荐规则：你安装了 eslint-plugin-react-hooks，但未继承对应推荐配置，Airbnb 18.x 仅内置了部分 hooks 规则，补充官方推荐配置覆盖更全面
  • 缺少 React 版本自动检测配置，react 插件可能抛出未指定版本的警告
  • react/jsx-filename-extension 规则值用 1 代表警告等级，功能正常；ESLint 规则支持 0/1/2 数字等级，推荐用语义化字符串 'off'/'warn'/'error' 提升可读性

Prettier 配置部分 #

你设置的几项规则均为合法常用配置，不影响运行，仅文件内引号风格不统一，属于代码格式问题，对功能无任何影响。Prettier 规则没有强制标准，所有项都可以根据团队代码风格调整，只要不叠加冲突的 ESLint 格式规则即可。

所有包都需要安装在项目本地的开发依赖中：

• 安装 ESLint、Prettier 核心包

npm install eslint prettier --save-dev

• 安装 Airbnb React 配置及所有对等依赖

npx install-peerdeps --dev eslint-config-airbnb

• 安装 ESLint 与 Prettier 的衔接包，用于关闭冲突规则、让 ESLint 调度 Prettier 校验

npm install eslint-config-prettier eslint-plugin-prettier --save-dev

ESLint 配置 #

项目根目录创建 .eslintrc.js：

module.exports = {
  env: {
    browser: true,
    es2021: true,
    jest: true, // 无单元测试需求可删除
  },
  extends: [
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'airbnb',
    'plugin:prettier/recommended',
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  settings: {
    react: {
      version: 'detect', // 自动检测项目安装的 React 版本
    },
  },
  rules: {
    // 允许 js/jsx 文件中写 JSX，Airbnb 默认仅允许 jsx 文件
    'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx'] }],
    // 其余自定义规则在此添加
  },
};

Prettier 配置 #

项目根目录创建 .prettierrc.js，可直接沿用你原有规则，统一代码风格即可：

module.exports = {
  trailingComma: 'es5',
  tabWidth: 2,
  semi: true,
  singleQuote: true,
};

忽略文件 #

新增 .eslintignore 和 .prettierignore，跳过不需要校验的依赖和构建产物：

# .eslintignore
node_modules
build
dist

# .prettierignore
node_modules
build
dist
package-lock.json

如果是 Create React App 创建的项目，根目录新增配置文件会自动覆盖 CRA 内置的 ESLint 规则，无需执行 eject 操作。

手动命令行执行 #

在 package.json 中添加脚本命令，统一调用入口：

{
  "scripts": {
    "lint": "eslint . --ext .js,.jsx",
    "lint:fix": "eslint . --ext .js,.jsx --fix",
    "format": "prettier --write \"src/**/*.{js,jsx,css,md}\""
  }
}

• npm run lint：校验所有 js/jsx 文件，列出所有规范和格式问题
• npm run lint:fix：自动修复所有可修复的问题，无法自动修复的语法/逻辑问题会列在终端
• npm run format：单独批量格式化指定目录下的指定类型文件，可根据项目调整后缀和路径

编辑器实时校验（日常开发推荐） #

以 VS Code 为例，安装 ESLint、Prettier 官方扩展后，在工作区新增 .vscode/settings.json，开启保存自动修复：

{
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "javascriptreact"]
}

注意必须关闭编辑器全局自动格式化，所有修复交给 ESLint 调度，避免多工具规则冲突。

Git 提交强制校验（团队项目推荐） #

使用 husky + lint-staged 在代码提交时仅校验暂存区文件，校验不通过则阻止提交，保证入库代码规范统一：

• 安装依赖

npm install husky lint-staged --save-dev

• 在 package.json 中添加 lint-staged 配置

{
  "lint-staged": {
    "*.{js,jsx}": "eslint --fix"
  }
}

• 启用 Git 钩子（适用于 husky 7.x 版本）

npx husky install
npx husky add .husky/pre-commit "npx lint-staged"

• 不要全局安装 ESLint、Prettier 及相关插件，本地安装可以保证不同项目、不同环境的版本完全一致
• extends 数组的规则优先级从前往后递增，所有覆盖类配置（比如 Prettier）必须放在数组末尾
• 自定义规则统一写在 rules 字段中，不要直接修改依赖包内的第三方配置

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