Prettier 如何与 ESLint 配合使用？

Question

仓乃文 · Accepted Answer

Prettier 负责代码格式化，ESLint 负责代码质量。通过 eslint-config-prettier 关闭冲突规则，用 eslint-plugin-prettier 将 Prettier 作为 ESLint 规则运行。

安装依赖：
```bash
npm install -D prettier eslint-config-prettier eslint-plugin-prettier
```

ESLint 配置（推荐方案）：
```javascript
// .eslintrc.js
module.exports = {
  extends: [
    "eslint:recommended",
    "plugin:prettier/recommended",  // 必须放在最后，关闭冲突规则
  ],
  rules: {
    // ESLint 负责质量规则
    "no-unused-vars": "error",
    "no-console": "warn",
  },
};
```

Prettier 配置：
```javascript
// .prettierrc.js
module.exports = {
  semi: true,
  singleQuote: true,
  trailingComma: "all",
  printWidth: 100,
  tabWidth: 2,
};
```

VS Code 自动格式化配置：
```json
// .vscode/settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
```

补充说明：
- plugin:prettier/recommended 一次性完成三件事：extends prettier、注册插件、启用规则
- 格式化用 Prettier，质量检查用 ESLint，各司其职
- 保存时先 ESLint 修复再 Prettier 格式化，避免冲突
- 团队统一用 .vscode/settings.json 保证一致的开发体验