使用ESLint + Prettier自动化代码规范检查的配置指南​

以下是基于最新实践整理的 ​​ESLint + Prettier 自动化代码规范检查配置指南​​，涵盖工具集成、冲突解决、编辑器优化及流程自动化，帮助团队高效统一代码风格与质量。

---

🧩 一、工具定位与协作价值

1. ​​ESLint​​

   • ​​核心作用​​：静态代码分析，检测潜在错误（如未使用变量、类型错误）、代码质量（如函数复杂度）及部分风格问题。
   • ​​自动修复​​：支持 --fix 参数修复部分问题。

2. ​​Prettier​​

   • ​​核心作用​​：代码格式化工具，强制统一代码外观（缩进、引号、换行等），不涉及逻辑检查。
   • ​​协作模式​​：ESLint 负责逻辑检查，Prettier 接管格式化，避免职责重叠。

💡 二者分工：ESLint 保障健壮性，Prettier 保障风格一致性。

---

⚙️ 二、安装与基础配置

1. ​​安装依赖​​

npm install --save-dev \
  eslint \
  prettier \
  eslint-config-prettier \  # 关闭ESLint冲突规则
  eslint-plugin-prettier    # 将Prettier作为ESLint规则运行

2. ​​配置文件​​

• ​​ESLint 配置（.eslintrc.json）​​

  {
    "extends": [
      "eslint:recommended",
      "plugin:prettier/recommended"  // 关键！集成Prettier
    ],
    "rules": {
      "semi": ["error", "always"],   // 自定义规则示例
      "no-console": "warn"
    }
  }

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

• ​​Prettier 配置（.prettierrc）​​

  {
    "semi": true,          // 分号
    "singleQuote": true,   // 单引号
    "tabWidth": 2,         // 缩进2空格
    "trailingComma": "all" // 多行末尾逗号
  }

---

⚠️ 三、解决规则冲突

ESLint 和 Prettier 的格式化规则（如引号、缩进）可能冲突，需明确分工：

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

   npx eslint --print-config .eslintrc.json | grep prettier  # 验证冲突规则已关闭

2. ​​扩展风格指南（如 Airbnb）​​
   若使用 Airbnb 规范，需调整配置优先级：

   {
     "extends": [
       "airbnb-base",         // Airbnb规范
       "plugin:prettier/recommended"  // Prettier置于最后
     ]
   }

   规则优先级：ESLint > eslint-config-prettier > Prettier。

---

🔌 四、编辑器自动集成（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接管格式化
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true  // 保存时ESLint自动修复
  }
}

​​关键​​：关闭语言的文件保存格式化，由 eslint-plugin-prettier 在 ESLint 流程中触发格式化。

3. ​​项目级配置（.vscode/settings.json）​​

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

---

🤖 五、提交与构建流程自动化

1. ​​Git 提交前检查（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 ."  // 检查格式是否合规
  }
}

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

---

💎 最佳实践总结

1. ​​明确分工​​：ESLint 管逻辑，Prettier 管格式。
2. ​​优先级控制​​：ESLint 规则 > Prettier 规则，冲突时用 eslint-config-prettier 关闭冲突项。
3. ​​统一编辑器配置​​：项目级 .vscode/settings.json 确保团队一致性。
4. ​​流程卡点​​：提交前检查 + CI 流程阻断，确保代码库规范统一。