统一代码风格的关键在于配置落地:必须将.prettierrc、.editorconfig、.vscode/settings.json纳入Git,禁用ESLint格式规则,启用prettier.requireConfig:true,并确保工具链版本与环境参数一致。

团队代码风格不统一,根本不是人的问题,是配置没落到项目里。 VS Code 本身不带格式规则,它只负责调用外部工具;只要 .prettierrc、.editorconfig、.vscode/settings.json 三者缺一,或没进 Git,就注定有人保存后缩进变 4,有人变 2,有人分号消失,有人又自动加回来。
为什么 .vscode/settings.json 单独提交不管用
这个文件常被 .gitignore 忽略,或者开发者手动删掉——结果新成员 clone 后,VS Code 照样用内置格式器处理 JS、用 TypeScript 语言服务处理 TS、用 Vetur 处理 Vue 的 template,各干各的。更隐蔽的问题是:它只影响 VS Code,对 WebStorm、CI 流水线、npx prettier --write 命令完全无效。
- 必须显式在
.gitignore中排除.vscode/settings.json和.vscode/extensions.json,否则不会被版本控制 -
editor.defaultFormatter值必须精确匹配扩展 ID,比如"esbenp.pretterr-vscode"少个i就退化成系统默认格式器,毫无报错提示 - 不要在
settings.json里写editor.tabSize或files.insertFinalNewline——这些该由.editorconfig控制,否则跨编辑器失效
prettier.requireConfig: true 不是可选项
不设这个,Prettier 就会静默 fallback 到 VS Code 内置格式器(比如 TypeScript 的 formatOnSave),尤其在没有 .prettierrc 的项目里。现象是:同一份代码,A 电脑保存后引号变双,B 电脑变单;Vue 文件里 <script></script> 和 <template></template> 风格割裂;npm run format 和 Ctrl+S 输出不一致。
- 必须在
.vscode/settings.json中写"prettier.requireConfig": true - 项目根目录必须存在
.prettierrc或prettier.config.js,哪怕内容为空对象{}也行 - 别依赖全局安装的 Prettier:用
npm install --save-dev prettier@latest --save-exact,并在设置中指定"prettier.pretterrPath": "./node_modules/prettier"
ESLint 和 Prettier 冲突的本质是职责没切干净
不是“谁让步”,而是必须让 ESLint 放弃所有格式类规则,只管逻辑问题(比如 no-unused-vars)。常见错误是只装了 eslint-plugin-prettier,却没关掉 ESLint 自带的 quotes、semi、comma-dangle 等规则,导致保存时反复横跳。
- 在
.eslintrc.json的extends数组里,把"eslint:recommended"和"plugin:prettier/recommended"放一起还不够,必须额外加"eslint-config-prettier" - 验证是否切干净:临时删掉
.prettierrc,运行npx eslint --fix src/,如果代码风格变了(比如引号、分号、换行位置),说明 ESLint 还在干格式化的活 - VS Code 中禁用
editor.formatOnSave改用editor.codeActionsOnSave触发 ESLint 修复,避免和 Prettier 抢同一行
最容易被忽略的点是:Prettier 的 endOfLine 默认为 "lf",但 Windows 用户若没配好 Git 的 core.autocrlf,或 Node 版本低于 16,就可能在换行符上出岔子——这不是格式化工具的问题,是环境链没对齐。配置可以抄,但 node -v、git config core.autocrlf、npx prettier --version 这三个命令的结果,团队里得先对齐。


















