ESLint 与 Prettier

关联：前端工程化 / Vue / TypeScript核心语法

分工边界（先把职责说清楚）

• ESLint：偏“代码质量/最佳实践/潜在 Bug”检查（lint），例如未使用变量、错误的异步写法、Vue 规则等
• Prettier：偏“代码格式化”统一（format），例如缩进、引号、换行宽度、尾逗号等

安装依赖（常见组合）

Prettier 本体 + 两个关键包：

• prettier：格式化引擎
• eslint-config-prettier：关闭与 Prettier 冲突的 ESLint 规则（解决冲突）
• eslint-plugin-prettier：把 Prettier 作为 ESLint 规则运行（可选，偏“统一入口”）

Prettier 配置（示例）

.prettierrc（JSON 格式，注意不能写注释）：

{
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 100,
  "endOfLine": "auto"
}

.prettierignore（建议显式维护）：

dist
node_modules
coverage
.vscode
public
package-lock.json

ESLint 与 Prettier 集成思路（避免“互相打架”）

• 优先让 Prettier 负责格式化，ESLint 负责质量规则
• 需要同时用两者时，把 eslint-config-prettier 放到配置链路的最后，确保冲突规则被覆盖

常见坑

• 把 JSON 当成 JS 写：.prettierrc 如果用 JSON，不能写 // 注释
• 提交前格式不一致：建议在编辑器保存时格式化，或在 lint-staged/CI 里统一跑 format + lint

资料（PDF）

• [06 ESLint + Prettier 代码规范配置讲义（师生共用版・两课时）.pdf](file:///d:/Archives/personal/charley-s-garden-repo/tmp/%E6%9C%BA%E5%99%A8%E4%BA%BA%E4%B8%8E%E6%99%BA%E8%83%BD%E7%B3%BB%E7%BB%9F%E7%BB%BC%E5%90%88%E5%AE%9E%E8%B7%B5/06%20ESLint%20%2B%20Prettier%20%E4%BB%A3%E7%A0%81%E8%A7%84%E8%8C%83%E9%85%8D%E7%BD%AE%E8%AE%B2%E4%B9%89%EF%BC%88%E5%B8%88%E7%94%9F%E5%85%B1%E7%94%A8%E7%89%88%E3%83%BB%E4%B8%A4%E8%AF%BE%E6%97%B6%EF%BC%89.pdf)
• [06 ESLint+Prettier代码规范配置.pdf](file:///d:/Archives/personal/charley-s-garden-repo/tmp/%E6%9C%BA%E5%99%A8%E4%BA%BA%E4%B8%8E%E6%99%BA%E8%83%BD%E7%B3%BB%E7%BB%9F%E7%BB%BC%E5%90%88%E5%AE%9E%E8%B7%B5/06%20ESLint%2BPrettier%E4%BB%A3%E7%A0%81%E8%A7%84%E8%8C%83%E9%85%8D%E7%BD%AE.pdf)
• [附件01：ESLint 配置指南.pdf](file:///d:/Archives/personal/charley-s-garden-repo/tmp/%E6%9C%BA%E5%99%A8%E4%BA%BA%E4%B8%8E%E6%99%BA%E8%83%BD%E7%B3%BB%E7%BB%9F%E7%BB%BC%E5%90%88%E5%AE%9E%E8%B7%B5/%E9%99%84%E4%BB%B601%EF%BC%9AESLint%20%E9%85%8D%E7%BD%AE%E6%8C%87%E5%8D%97.pdf)
• [附件02：Prettier 配置与集成指南.pdf](file:///d:/Archives/personal/charley-s-garden-repo/tmp/%E6%9C%BA%E5%99%A8%E4%BA%BA%E4%B8%8E%E6%99%BA%E8%83%BD%E7%B3%BB%E7%BB%9F%E7%BB%BC%E5%90%88%E5%AE%9E%E8%B7%B5/%E9%99%84%E4%BB%B602%EF%BC%9APrettier%20%E9%85%8D%E7%BD%AE%E4%B8%8E%E9%9B%86%E6%88%90%E6%8C%87%E5%8D%97.pdf)