eslint 和 prettier 的相同点和区别

ESLint 和 Prettier 都是前端开发中用于代码质量和风格管理的工具，但它们的定位和功能有明显区别，同时也存在一定关联。

一、相同点

目标一致 ：
都是为了提升代码质量、保持团队代码风格一致，减少协作中的格式冲突。
可集成性 ：
都可以与主流编辑器（VS Code、WebStorm 等）和构建工具（Webpack、Vite 等）集成，支持自动检测和修复。
配置化 ：
都允许通过配置文件（如 .eslintrc.js、.prettierrc）自定义规则，适应不同项目需求。

二、核心区别

维度	ESLint	Prettier
核心功能	专注于代码质量检查（语法错误、逻辑问题）	专注于代码格式美化（排版、缩进、引号等）
检查范围	不仅管格式，还管代码逻辑（如未定义变量、不合理的条件判断）	只负责格式，不关心代码逻辑是否正确
规则类型	包含 "代码质量规则"（如 `no-undef` 禁止未定义变量）和 "代码风格规则"（如 `quotes` 强制引号类型）	只包含 "代码风格规则"（如换行符、缩进空格数）
自动修复能力	部分规则支持自动修复（`--fix`），但复杂逻辑问题需手动修改	几乎所有格式问题都能自动修复，修复能力更强
设计理念	强调 "代码正确性"，阻止不良编码实践	强调 "格式一致性"，消除人为格式偏好差异

三、典型规则对比

ESLint 特有规则（代码质量）

javascript

运行

复制代码

// 检测未定义的变量（语法错误）
const foo = bar; // ESLint 报错：'bar' is not defined (no-undef)

// 检测不合理的逻辑（如恒为 true 的条件）
if (true) { ... } // ESLint 警告：Unexpected constant condition (no-constant-condition)

// 检测未使用的变量
const unused = 123; // ESLint 警告：'unused' is assigned a value but never used (no-unused-vars)

Prettier 特有规则（格式美化）

javascript

运行

复制代码

// 格式化前
const obj={name:"foo",age:20}
function fn(x){return x+1}

// Prettier 格式化后（自动补全空格、换行、分号）
const obj = { name: "foo", age: 20 };
function fn(x) {
  return x + 1;
}

ESLint 和 Prettier 可能重叠的规则（风格类）

例如 "引号类型""分号" 等规则，ESLint 和 Prettier 都可能涉及：

ESLint 有 quotes 规则（强制单 / 双引号）
Prettier 有 singleQuote 配置（功能类似）

此时需通过 eslint-config-prettier 禁用 ESLint 中与 Prettier 冲突的风格规则，避免二者互相干扰。

四、如何配合使用？

在实际项目中，通常同时使用两者，分工协作：

ESLint：负责代码质量检查（如语法错误、逻辑漏洞）和部分风格规则。
Prettier：负责统一代码格式（如缩进、换行、引号），优先级高于 ESLint 的风格规则。

集成步骤

安装依赖：

bash
复制代码
```
npm install eslint prettier eslint-config-prettier --save-dev
```
- eslint-config-prettier：禁用 ESLint 中与 Prettier 冲突的风格规则。

配置 ESLint（.eslintrc.js）：

javascript

运行

复制代码

module.exports = {
  extends: [
    "eslint:recommended",
    "prettier" // 放在最后，覆盖冲突规则
  ]
};

配置脚本（package.json）：

json

复制代码

{
  "scripts": {
    "lint": "eslint .", // 检查代码质量和剩余风格问题
    "lint:fix": "eslint . --fix", // 自动修复可修复的问题
    "format": "prettier --write ." // 强制格式化所有文件
  }
}

总结

ESLint 是 "代码质检员"：关注代码是否正确、合理，阻止错误实践。
Prettier 是 "代码化妆师"：专注格式统一，让代码看起来更规范，不关心逻辑。

两者结合使用，可同时保证代码的正确性 和美观性，是现代前端项目的最佳实践。