ESLint 和 Prettier 一起使用

ESLint 和 Prettier 是否二选一就行

ESLint 和 Prettier 不是二选一的关系！它们有完全不同的职责，应该一起使用。

📊 核心区别对比

🔧 各自擅长领域

ESLint 处理的问题

javascript

// 1. 潜在错误
if (a = 5) { }          // 可能应该是 == 或 ===

// 2. 代码质量问题
const unusedVar = 5;    // 未使用的变量

// 3. 最佳实践
if (true) return;       // 缺少大括号

// 4. 代码复杂度
function tooComplex() { /* 复杂逻辑 */ }  // 圈复杂度检查

Prettier 处理的问题

javascript

// 1. 格式化前
const obj={a:1,b:2};function test(){return 'hello';}

// 2. 格式化后（Prettier 处理）
const obj = { a: 1, b: 2 };
function test() {
  return 'hello';
}

🤝 为什么需要两者？

场景分析：只用 ESLint

javascript

// 代码可能有逻辑错误，但格式整齐
// ESLint 能发现逻辑问题，但不会统一格式风格
const x=1;const y=2;
if(x===1){
console.log('yes');}

// 团队中可能每个人的格式风格不同

场景分析：只用 Prettier

javascript

// 代码格式漂亮，但可能有bug
// Prettier 会美化格式，但不会发现逻辑错误
const unused = 5;  // 未使用的变量（Prettier 不会警告）
if (value = 5) {   // 赋值而非比较（Prettier 不会警告）
  console.log('oops');
}

场景分析：两者结合（推荐）

javascript

// 既格式统一又质量保证
// 1. Prettier 格式化代码
// 2. ESLint 检查代码质量
// 3. 两者配合自动修复

// 最终代码：
const x = 1;
const y = 2;

if (x === 1) {
  console.log('yes');
}

🛠️ 如何配置两者一起工作

方案1：独立使用（推荐）

json

// package.json
{
  "devDependencies": {
    "eslint": "^9.0.0",
    "prettier": "^3.0.0"
  },
  "scripts": {
    "lint": "eslint src/",
    "format": "prettier --write src/",
    "lint:fix": "eslint src/ --fix",
    "format:check": "prettier --check src/"
  }
}

方案2：使用 prettier-eslint 插件

bash

# 安装集成插件
npm install --save-dev eslint-config-prettier eslint-plugin-prettier

javascript

// .eslintrc.js
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:prettier/recommended'  // 放在最后
  ],
  rules: {
    // 你的规则
  }
};

json

// .prettierrc
{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 80
}

方案3：VS Code 配置

json

// .vscode/settings.json
{
  // 保存时自动格式化
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  
  // 指定格式化工具
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  
  // 解决冲突
  "prettier.requireConfig": true,
  "eslint.format.enable": false  // 禁用 ESLint 的格式化功能
}

⚡ 工作流程示例

开发时（实时）

text

写代码 → Prettier自动格式化 → ESLint检查错误 → 显示问题 → 手动/自动修复

提交前（Git Hook）

json

// package.json
{
  "scripts": {
    "precommit": "lint-staged"
  }
}

json

// .lintstagedrc
{
  "*.{js,ts,jsx,tsx}": [
    "prettier --write",
    "eslint --fix"
  ]
}

CI/CD 中

yaml

# GitHub Actions 示例
jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: npm ci
      - run: npm run format:check    # 检查格式
      - run: npm run lint            # 检查代码质量

🎯 配置要点：避免冲突

1. 关闭 ESLint 的格式化规则

javascript

// .eslintrc.js
module.exports = {
  extends: ['eslint:recommended', 'prettier'], // prettier 必须在最后
  rules: {
    // 这些规则与 Prettier 冲突，应该禁用
    'indent': 'off',           // 使用 Prettier 的缩进
    'quotes': 'off',           // 使用 Prettier 的引号规则
    'semi': 'off',             // 使用 Prettier 的分号规则
    'comma-dangle': 'off'      // 使用 Prettier 的逗号规则
  }
};

2. 优先级顺序

text

Prettier（格式化） → ESLint（代码质量）

• Prettier 负责所有格式化

• ESLint 负责代码逻辑质量

📁 完整项目配置示例

文件结构

text

project/
├── .eslintrc.js          # ESLint 配置
├── .eslintignore         # ESLint 忽略文件
├── .prettierrc           # Prettier 配置
├── .prettierignore       # Prettier 忽略文件
├── .vscode/
│   └── settings.json     # VS Code 配置
├── package.json
└── src/
    └── index.js

配置文件内容

javascript

// .eslintrc.js
module.exports = {
  env: { browser: true, es2021: true },
  extends: ['eslint:recommended', 'plugin:prettier/recommended'],
  parserOptions: { ecmaVersion: 'latest' },
  rules: {
    'no-console': 'warn',
    'no-unused-vars': 'warn'
  }
};

json

// .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "endOfLine": "lf"
}

json

// package.json 脚本
{
  "scripts": {
    "lint": "eslint src/",
    "lint:fix": "eslint src/ --fix",
    "format": "prettier --write src/",
    "format:check": "prettier --check src/",
    "prepare": "husky install",
    "pre-commit": "lint-staged"
  },
  "devDependencies": {
    "eslint": "^9.0.0",
    "prettier": "^3.0.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-prettier": "^5.0.0",
    "husky": "^8.0.0",
    "lint-staged": "^13.0.0"
  }
}

🚫 何时可以只用一个？

只使用 ESLint 的情况

1. 小型个人项目，不关心格式一致性

2. 已有团队统一的编码风格，不需要额外格式化

3. 项目历史原因，无法引入 Prettier

只使用 Prettier 的情况

1. 非 JavaScript 项目（如 JSON、Markdown、CSS）

2. 只关心格式，不关心代码质量检查

3. 项目已有其他质量检查工具

✅ 最佳实践总结

1. 两者都要用：ESLint 负责质量，Prettier 负责格式

2. 明确分工：Prettier 处理所有格式化，ESLint 处理所有逻辑检查

3. 避免冲突：使用 eslint-config-prettier 关闭 ESLint 的格式化规则

4. 自动化：配置保存时自动修复和格式化

5. 团队统一：配置文件提交到代码仓库

6. CI/CD 集成：在流水线中运行检查和格式化

bash

# 推荐安装命令
npm install --save-dev \
  eslint \
  prettier \
  eslint-config-prettier \
  eslint-plugin-prettier \
  husky \
  lint-staged

结论：对于现代前端项目，ESLint 和 Prettier 是互补工具，而不是替代品。正确配置后，它们能提供"1+1>2"的效果，既保证代码质量又保证风格统一。