JavaScript代码风格统一：eslint与prettier配置教程

本文深入解析了如何正确配置 ESLint 与 Prettier 实现 JavaScript/TypeScript 项目代码风格的统一与协同：明确二者分工——ESLint 专司逻辑错误与质量检查，Prettier 专注无脑格式化；强调必须通过 `eslint-config-prettier`（或 `extends: ['prettier']`）彻底禁用 ESLint 中所有与 Prettier 冲突的格式规则，并严格保证其在配置链末尾以避免修复结果反复“摆动”；提供最小可行的 `.eslintrc.cjs` 和 `.prettierrc` 配置示例，兼顾 TypeScript 支持与 Node.js 环境稳定性；同时指出 VS Code 中常见陷阱——如误启 ESLint 格式化导致类型丢失，并给出精准设置方案；最后点明真正痛点不在工具配置，而在团队协作中的一致性保障，推荐将 `prettier --check` 纳入 CI/CD 流程，让风格统一从开发到交付真正落地可靠。

ESLint 和 Prettier 不是互换关系，而是分工协作：ESLint 检查代码逻辑和潜在错误，Prettier 只做格式化。强行让 ESLint “接管格式” 或忽略 Prettier 规则，必然导致冲突和不可预测的修复结果。

为什么 eslint-config-prettier 是必装项

ESLint 自带的格式规则（如 indent、quotes、semi）和 Prettier 的格式输出经常打架。比如 Prettier 默认不加分号，而 ESLint 的 semi: ["error", "never"] 会报错；又比如 Prettier 对箭头函数单参数是否加括号有自己判断，ESLint 的 arrow-parens 规则可能反向覆盖。

• 必须安装并启用 eslint-config-prettier，它会关闭所有与 Prettier 冲突的 ESLint 格式类规则
• 它不提供任何新规则，只做“清道夫”，顺序必须放在 ESLint 配置的最后（越靠后优先级越高）
• 不装它，eslint --fix 和 prettier --write 反复执行会导致代码来回“摆动”

.eslintrc.cjs 和 .prettierrc 的最小可靠配置

用 CommonJS 格式（.cjs）避免 ESM 加载问题，尤其在 Node.js 18+ 环境下更稳定；Prettier 配置保持极简，把格式决策权交给工具本身。

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier' // ← 这行等价于加载 eslint-config-prettier
  ],
  rules: {
    // 仅保留非格式类规则，例如：
    'no-console': 'warn',
    '@typescript-eslint/no-unused-vars': 'error'
  }
};

Prettier 配置文件只需声明基础偏好：

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80
}

• prettier 在 extends 中必须放最后，否则前面的规则会重新激活被禁用的格式检查
• 不要在 ESLint 中重复配置 semi 或 quotes，这些已由 Prettier 全权负责
• TypeScript 项目务必用 @typescript-eslint/parser，否则 ESLint 无法解析 TS 语法

VS Code 中如何避免保存时“自动修出 bug”

VS Code 的 editor.formatOnSave 默认调用的是内置格式化器或第一个可用的，容易误用 ESLint 的 format 能力（它本不该干这事），造成类型注解被删、import 排序错乱等问题。

• 在工作区设置中显式指定格式化工具："editor.defaultFormatter": "esbenp.prettier-vscode"
• 关闭 ESLint 插件的自动格式："eslint.format.enable": false
• 如需保存时同时 lint + format，推荐用 onSave 脚本组合：eslint --fix && prettier --write，而非依赖编辑器插件联动

真正麻烦的从来不是配置本身，而是团队里有人手动改了 .prettierrc 却没同步到 ESLint 配置，或者本地开了 Prettier 插件但 CI 里只跑 ESLint —— 格式差异会在 PR 里突然爆炸。把 prettier --check 加进 test 或 lint 脚本，比调一百遍插件设置管用。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript代码风格统一：eslint与prettier配置教程》文章吧，也可关注golang学习网公众号了解相关技术文章。