prettier 专责格式(缩进、引号等),eslint 专责逻辑与风格规则;二者重叠规则必须禁用以防冲突抖动,需通过 eslint-config-prettier 清空 eslint 格式规则,并优先使用 .prettierrc 配置文件。

为什么 prettier 不该和 eslint 混用格式规则
直接结论:prettier 负责格式(缩进、换行、引号、括号位置),eslint 负责逻辑与风格(如变量命名、禁止 eval、强制 ===)。两者重叠的规则(比如 quotes 或 semi)必须禁用,否则会互相覆盖或报错。
常见错误现象是:保存文件后格式反复“抖动”——刚被 prettier 加了分号,eslint --fix 又删掉;或者 eslint 报出 prettier/prettier 错误却 fix 不了。
- 在
.eslintrc.js中加入"prettier"到extends数组末尾,确保它最后执行 - 显式关闭所有与格式相关的
eslint规则:用eslint-config-prettier,不是可选,是必须 - 不要手动写
"semi": ["error", false]这类规则——eslint-config-prettier已经帮你清空了
prettier 的配置文件到底该用 .prettierrc 还是 package.json
优先用 .prettierrc(支持 json/yaml/js),而不是塞进 package.json。原因很实际:IDE 插件(如 VS Code 的 Prettier 扩展)默认只读 .prettierrc,而 package.json 里的 prettier 字段需要额外配置才能识别,容易漏。
更关键的是,.prettierrc 支持注释(用 .prettierrc.js),方便写说明,比如:
module.exports = {
// 强制单引号,避免 JSX 中混用引号引发 lint 报错
singleQuote: true,
// 行宽设为 80 是为了兼顾 PR diff 可读性,不是教条
printWidth: 80,
// 不要末尾逗号 —— TypeScript 接口/类型字面量里加它反而易出错
trailingComma: "none",
};
注意:printWidth 不是硬性截断,而是“尽量不超过”,Prettier 会根据语法结构智能换行;设太小(如 60)会导致对象字面量被强行拆成 5 行,反而降低可读性。
VS Code 保存时自动格式化但不生效?检查这三处
典型现象:按 Ctrl+S 没反应,或只格式化部分文件,或提示 “No formatter for ‘javascript’ installed”。这不是插件没装,而是配置没对齐。
- 确认已安装官方
esbenp.prettier-vscode插件(非其他同名插件) - 在用户设置(
settings.json)中启用:"editor.formatOnSave": true,且不要在工作区设置里覆盖它 - 关键一步:为每种语言指定 formatter,例如:
"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}"[typescript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}"[json]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}
漏掉语言映射,就等于告诉 VS Code:“JS 文件请用内置格式器,别找 Prettier”——哪怕插件装了也白搭。
Git 提交前自动格式化:用 lint-staged 而不是 pre-commit hook 直跑 prettier
直接在 pre-commit 里执行 npx prettier --write . 很危险:它会格式化整个项目,包括 node_modules(如果路径没 exclude)、构建产物、甚至别人还没 commit 的临时文件。真正要的,只是本次 git add 进暂存区的那些文件。
lint-staged 就是干这个的——它只把暂存区文件路径传给命令,精准、安全、快。
- 安装:
npm install --save-dev lint-staged husky - 在
package.json中加:"lint-staged": {"*.{js,ts,jsx,tsx,json,md}": "prettier --write"} - 用
npx husky add .husky/pre-commit "npx lint-staged"绑定 hook
注意路径通配符必须显式列出后缀,* 不匹配隐藏文件(如 .prettierrc),也不匹配嵌套子目录里的文件——除非你加 **/*,但通常没必要,因为 git add 时已明确指定了文件。
最常被忽略的一点:团队成员本地没装 husky 或没启用 hook,提交照样绕过格式检查。所以 CI 流程里仍需加一步 prettier --check 校验,不能只信本地。










