统一代码格式需用.editorconfig+prettier+vscode/settings.json三层约束:.editorconfig定义基础规则并跨ide生效,prettier配置须与cli版本对齐,settings.json仅启用自动保存和指定formatter id,禁写缩进等具体值;eslint须关闭所有格式规则以避免与prettier冲突;ci和本地须使用相同prettier命令及node版本确保结果一致。

vscode 里怎么让所有人格式化出一样的代码
靠每个开发者手动点“格式化文档”肯定不行,必须把规则固化到项目里。核心是用 .editorconfig + prettier(或语言原生 formatter)+ .vscode/settings.json 三层约束,其中前两者进 Git,后者只起兜底提示作用。
常见错误现象:Ctrl+Shift+I 在 A 电脑缩进 2 空格,在 B 电脑变成 4;保存时自动格式化 开关状态不一致;团队有人装了冲突的 Prettier 插件版本,结果 prettier.config.js 里的 semi: false 不生效。
-
.editorconfig放项目根目录,定义基础缩进、换行、字符集,VS Code 默认识别,不用装插件也能生效 -
prettier配置(如prettier.config.js或.prettierrc)必须和prettierCLI 版本对齐,建议用npx prettier --write而非插件内置命令 -
.vscode/settings.json只写"editor.formatOnSave": true和"editor.defaultFormatter",禁止写具体缩进数值——那些该由.editorconfig控制
为什么不能只靠 .vscode/settings.json 同步格式化行为
因为这个文件默认不进 Git(很多团队 .gitignore 里写了 .vscode),即使进了,它也只影响 VS Code,对 WebStorm、Vim、CI 流水线完全无效。更麻烦的是:它会覆盖用户全局设置,比如某人习惯用 eslint --fix 处理 JS,但项目里硬设了 defaultFormatter 为 Prettier,保存就直接绕过 ESLint 规则。
使用场景:多人协作的开源项目、跨 IDE 的外包交付、需要跑 lint-staged 的 pre-commit 钩子。
-
.vscode/settings.json的editor.defaultFormatter必须指向已安装的扩展 ID(如esbenp.prettier-vscode),ID 错一个字符就退化成系统默认 formatter - 如果项目用 TypeScript,别只配 Prettier——
typescript.preferences.quoteStyle这类语言服务级设置,得靠typescript.tsdk指向本地node_modules/typescript才能保证所有人的 TSServer 行为一致 - 某些公司禁用插件市场,员工只能手动下载
.vsix安装,此时settings.json里写的 formatter ID 若没提前装好,VS Code 会静默 fallback 到内置 formatter,毫无提示
Prettier 和 ESLint 冲突时谁该让步
ESLint 负责逻辑正确性(比如 no-unused-vars),Prettier 只管样式(空格、括号、分号)。一旦配置重叠(例如都管引号、分号),必须让 Prettier 全权负责格式,ESLint 关掉所有格式类规则——否则保存时反复横跳,甚至触发无限格式化循环。
典型错误现象:保存后引号从单引号变双引号,再保存又变回去;prettier-eslint-cli 已废弃,现在官方推荐 eslint-config-prettier 关闭 ESLint 的格式检查。
- 运行
npx eslint --init选 “style guide” 时,务必勾选 “Use a popular style guide”,之后再手动加eslint-config-prettier - 在
eslint.config.js中,eslint-config-prettier必须放在 extends 数组**最后**,否则会被前面的规则覆盖 - Vue 项目注意:
eslint-plugin-vue的vue/html-self-closing这类规则和 Prettier 冲突,得单独用eslint-config-prettier/vue
格式化配置如何兼容 CI 和本地提交
本地按 Ctrl+S 格式化,CI 却用 npm run format 检查,两者行为不一致等于白配。关键不是“能不能格式化”,而是“格式化结果是否可重现”。
性能影响:Prettier 8.x 开始默认启用 cache,但 CI 容器每次都是干净环境,必须显式传 --cache-location 或干脆关掉缓存避免误判。
- CI 脚本里统一用
npx prettier --check "src/**/*.{js,ts,jsx,tsx}",路径用引号包住,防止 shell 展开失败 - Git hooks 用
lint-staged时,配置项prettier --write后面**不要加--cache**,否则首次提交可能漏格式化 - 团队若混用 Windows / macOS / Linux,注意
.editorconfig里end_of_line = lf必须显式声明,否则 Windows 用户 git checkout 后换行符变成crlf,Prettier 会误判为“未格式化”
最易被忽略的其实是 Node.js 版本——Prettier 3.0 要求 Node ≥ 18.12,但很多 CI 镜像默认还是 Node 16。格式化脚本不报错,只是悄悄降级到旧版 Prettier,导致本地和 CI 结果不一致。











