如何配置 ESLint 和 Prettier 实现代码规范化？_eslint和prettier配置

以下是结合 ESLint 和 Prettier 实现代码规范化的完整配置指南，涵盖核心概念、安装、配置、规则定制及编辑器集成：

一、ESLint 与 Prettier 的分工与协作

1. 核心定位差异
   • ESLint：静态代码分析工具，检测代码质量、潜在错误及风格问题（如未使用变量、错误语法）。支持自定义规则和自动修复（--fix） [2][13][23]。
   • Prettier：代码格式化工具，强制统一代码外观（缩进、引号、换行等），不涉及代码逻辑检查 [4][13][23]。
   • 协作模式：ESLint 负责逻辑检查，Prettier 负责格式化，通过插件避免规则冲突 [2][84]。

二、安装与基础配置

1.安装依赖包

npm install --save-dev \\ eslint@8.54.0 \\ # ESLint 核心 prettier@3.1.0 \\ # Prettier 核心 eslint-config-prettier@9.0.0 \\ # 关闭 ESLint 与 Prettier 冲突的规则 eslint-plugin-prettier@5.0.0 \\ # 将 Prettier 作为 ESLint 规则运行 @typescript-eslint/parser@latest \\ # TypeScript 解析器（如用 TS） eslint-plugin-react@7.33.2 # React 项目插件（可选）

 说明：eslint-config-prettier 禁用 ESLint 的格式化规则，由 Prettier 接管；eslint-plugin-prettier 将 Prettier 整合到 ESLint 流程中 。

2.配置文件创建

.eslintrc.json (ESLint 配置)

{ \"parser\": \"@typescript-eslint/parser\", // TypeScript 项目需指定 \"extends\": [ \"eslint:recommended\", // ESLint 推荐规则 \"plugin:react/recommended\", // React 规则（可选） \"plugin:prettier/recommended\" // 集成 Prettier（关键！） ], \"rules\": { \"semi\": [\"error\", \"always\"], // 自定义规则示例：强制分号 \"no-console\": \"warn\" // 禁止 console 警告 }}

• \"plugin:prettier/recommended\" 等价于同时启用 eslint-plugin-prettier 和 eslint-config-prettier 。

• .prettierrc (Prettier 配置)

{ \"semi\": true, // 加分号 \"singleQuote\": true, // 使用单引号 \"tabWidth\": 2, // 缩进 2 空格 \"trailingComma\": \"all\" // 多行对象/数组末尾加逗号}

• 通过此文件覆盖 Prettier 默认规则 。

三、解决规则冲突与风格统一

1.禁用 ESLint 的格式化规则

eslint-config-prettier 自动关闭 ESLint 中与 Prettier 冲突的规则（如 indent, quotes），确保 Prettier 独占格式化职责 。

验证：运行 npx eslint --print-config .eslintrc.json | grep prettier 确认冲突规则已关闭。

2.扩展流行风格指南（如 Airbnb） 

安装 Airbnb 规则集并集成：

npm install --save-dev eslint-config-airbnb-base

修改 .eslintrc.json：

\"extends\": [ \"airbnb-base\",  // Airbnb 规范 \"plugin:prettier/recommended\"]

1. Airbnb 规则涵盖变量命名、对象声明等最佳实践 。

四、编辑器自动集成（以 VS Code 为例）

1.安装扩展

• ESLint
• Prettier

2.配置 settings.json

{ \"editor.formatOnSave\": true, // 保存时自动格式化 \"editor.defaultFormatter\": \"esbenp.prettier-vscode\", // 默认格式化器 \"eslint.validate\": [\"javascript\", \"typescript\", \"jsx\"], // 检测语言 \"eslint.codeAction.showDocumentation\": { \"enable\": true }, \"[javascript]\": { \"editor.formatOnSave\": false // 由 ESLint 接管格式化 }}

1. 说明：关闭 JavaScript 的 formatOnSave，由 eslint-plugin-prettier 在 ESLint 流程中触发格式化 。

3. 项目级配置

创建 .vscode/settings.json 覆盖全局设置，确保团队一致性：

{ \"eslint.workingDirectories\": [\"./src\"], \"prettier.configPath\": \"./.prettierrc\"}

五、自动化流程增强

1.Git Hooks 预检查

使用 Husky + lint-staged 提交前自动检查：

npx husky init && npm install --save-dev lint-staged

 配置 package.json：

\"lint-staged\": { \"*.{js,jsx,ts,tsx}\": [ \"eslint --fix\", // 自动修复 ESLint 错误 \"prettier --write\" // 格式化文件 ]}

2.CI/CD 集成

在构建流程中添加命令：

\"scripts\": { \"lint\": \"eslint . --ext .js,.jsx,.ts,.tsx\", \"format\": \"prettier --check .\"}

1. CI 中运行 npm run lint && npm run format 阻断不规范代码 。

六、常见问题处理

1. 规则覆盖优先级
   ESLint 规则 > eslint-config-prettier > Prettier 配置。

   若 Prettier 未生效，检查是否被 ESLint 规则覆盖 。

2. TypeScript/React 支持

   • 安装 @typescript-eslint/eslint-plugin 并配置 parserOptions 。
   • React 项目启用 eslint-plugin-react-hooks 检查 Hooks 规则 。

七、参考配置示例

• ESLint + Prettier + Airbnb
  Airbnb 风格指南 + Prettier 集成方案 。
• 定制规则包
  可封装统一配置包（如 @company/eslint-config）供团队复用。

通过以上步骤，可实现从代码编辑到提交的自动化规范化流程，兼顾质量检查与风格统一，显著提升团队协作效率。