ESLint + Prettier：代码规范的“紧箍咒”

ESLint 和 Prettier 是现代前端工程中不可或缺的工具组合，它们像“紧箍咒”一样强制约束代码风格和潜在问题。两者的分工明确：ESLint 负责代码质量检查，Prettier 专注格式化统一。当它们协同工作时，开发者能更专注于逻辑而非风格争论。

为什么需要代码规范工具

团队协作中，代码风格差异会导致额外沟通成本。例如：

• 有人用单引号，有人用双引号
• 缩进选择 2 空格还是 4 空格
• 是否强制省略行尾分号
• 对象大括号是否换行

这些分歧会污染代码审查过程，甚至引发不必要的争论。通过工具强制执行规范，可以彻底消除这类问题。

ESLint 的核心能力

ESLint 通过规则(rule)系统实现代码质量检查。其核心功能包括：

1. 语法错误检测：在运行前发现拼写错误或语法问题

// 错误示例：未声明变量
function demo() {
  consle.log('error') // ESLint 报错：'consle' is not defined
}

2. 代码风格约束：

// .eslintrc.js
module.exports = {
  rules: {
    'quotes': ['error', 'single'], // 强制单引号
    'semi': ['error', 'always']    // 必须带分号
  }
}

3. 最佳实践提示：

// 警告使用 == 而非 ===
if (age == '18') {  // ESLint 提示：Expected '===' and instead saw '=='
  // ...
}

Prettier 的格式化哲学

Prettier 采用"固执己见"的设计理念，提供极少的配置项但保证输出一致性：

// 输入（格式混乱）
const user={name:'John',age:30,skills:['js','css']};

// Prettier 格式化后
const user = {
  name: "John",
  age: 30,
  skills: ["js", "css"]
};

关键特性：

• 自动重排代码结构
• 统一字符串引号
• 标准化缩进和行宽
• 智能处理长表达式换行

协同工作配置方案

两者配合时需要处理规则冲突。推荐方案：

1. 安装必要依赖：

npm install eslint prettier eslint-config-prettier eslint-plugin-prettier -D

2. ESLint 配置（.eslintrc.js）：

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:prettier/recommended' // 必须放在最后
  ],
  rules: {
    // 自定义规则
  }
}

3. Prettier 配置（.prettierrc）：

{
  "printWidth": 80,
  "tabWidth": 2,
  "singleQuote": true
}

实际工作流示例

结合 Git Hooks 实现提交前自动检查：

1. 安装 husky 和 lint-staged：

npm install husky lint-staged -D

2. package.json 配置：

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx}": ["eslint --fix", "prettier --write"]
  }
}

处理 TypeScript 项目

对于 TS 项目需要额外配置：

// .eslintrc.js
module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  extends: [
    'plugin:@typescript-eslint/recommended',
    'prettier/@typescript-eslint'
  ]
}

定制化规则策略

根据项目需求调整规则严格度：

// 宽松模式（适合初创项目）
rules: {
  'no-console': 'warn'  // 允许console但提示警告
}

// 严格模式（企业级项目）
rules: {
  'no-console': 'error',
  'complexity': ['error', 5]  // 圈复杂度限制
}

常见问题解决方案

问题1：ESLint 和 Prettier 规则冲突

• 解决方案：确保 eslint-config-prettier 禁用所有冲突规则

问题2：VSCode 保存时不自动格式化

• 检查设置：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

问题3：部分文件需要豁免检查

• 添加 .eslintignore：

*.config.js
dist/

高级集成技巧

与 CI/CD 管道结合：

# GitHub Actions 示例
name: Lint
on: [push]
jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm install
      - run: npm run lint

自定义 parser 处理特殊语法：

// 解析 Vue 单文件组件
module.exports = {
  parser: 'vue-eslint-parser',
  extends: ['plugin:vue/recommended']
}

性能优化方案

大型项目中的提速方法：

1. 增量检查：

eslint --cache

2. 限制检查范围：

eslint --ext .js,.ts src/

3. 并行执行：

npm install eslint-plugin-unicorn -D
# 配置规则
rules: {
  'unicorn/no-for-loop': 'error' // 用数组方法替代for循环
}