以下是结合 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）供团队复用。

---

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