前端工程化：ESLint + Prettier 配置

多人协作时，代码风格不一、低级错误频发是痛点。ESLint 负责代码质量检查，Prettier 负责格式统一，两者配合是前端工程化的基础。

一、ESLint：代码质量

ESLint 检查代码潜在问题：未使用变量、隐式转换、可能的 bug。

npm install -D eslint
npx eslint --init       # 交互式初始化配置

二、配置文件

// .eslintrc.js
module.exports = {
  env: { browser: true, es2022: true },
  extends: ['eslint:recommended'],
  rules: {
    'no-unused-vars': 'warn',
    'no-console': 'off',
    'eqeqeq': 'error'        // 强制 ===
  }
};

三、Prettier：代码格式

Prettier 不管对错，只管格式统一：缩进、引号、换行。

npm install -D prettier

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

四、两者集成

ESLint 和 Prettier 有功能重叠，用 eslint-config-prettier 关闭冲突规则：

npm install -D eslint-config-prettier eslint-plugin-prettier
// .eslintrc.js
extends: ['eslint:recommended', 'plugin:prettier/recommended']

原则：ESLint 管"对不对"（逻辑、潜在 bug），Prettier 管"好不好看"（格式）。两者各司其职，通过插件协调。

五、配合编辑器

VSCode 装 ESLint 和 Prettier 插件，设置保存时自动修复：

// settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

六、配合 Git Hook

用 husky + lint-staged 在提交前自动检查，不合规的代码提交不了：

npm install -D husky lint-staged
// package.json
"lint-staged": {
  "*.js": ["eslint --fix", "prettier --write"]
}

七、常见规则集

• eslint:recommended：官方推荐
• airbnb：Airbnb 风格（严格）
• standard：Standard JS 风格
• eslint-config-vue / @typescript-eslint：框架/语言扩展

八、小结

ESLint + Prettier 是团队协作的基石。前期配置要花点时间，但一旦配好，代码质量和一致性大幅提升，长期收益巨大。