必须组合ESLint+Prettier+EditorConfig并提交配置文件到Git,否则团队代码风格无法统一;VSCode默认校验和格式化器能力有限,需禁用javascript.validate.enable、指定defaultFormatter、禁用ESLint与Prettier冲突规则,并用EditorConfig保障跨编辑器基础一致性。

直接上结论:光靠 VSCode 自带的 JavaScript 校验(javascript.validate.enable)无法统一团队风格,必须组合 ESLint + Prettier + EditorConfig 三者,并通过项目级配置文件落地,否则不同人保存出来的代码依然不一致。
为什么不能只开“保存时格式化”
VSCode 默认的 JS 格式化器(vscode.typescript-language-features)只处理基础缩进、括号换行等,对分号、引号、尾随逗号、空格位置等关键风格项完全不管。打开 editor.formatOnSave 却没指定 editor.defaultFormatter,结果就是有人用 Prettier、有人用内置、有人手动调,越格式化越混乱。
- 现象:
semi开关不生效、singleQuote被忽略、trailingComma时有时无 - 根本原因:VSCode 不会主动读取
.prettierrc或.eslintrc.json,除非你显式绑定格式化器 - 正确做法:在
.vscode/settings.json中强制指定"editor.defaultFormatter": "esbenp.prettier-vscode"
ESLint 和 Prettier 到底谁管什么
ESLint 查逻辑错误和潜在 bug(比如未定义变量、== 误用),Prettier 只管怎么排版(缩进、换行、引号)。两者规则有重叠(比如都管分号),必须禁用 ESLint 里和 Prettier 冲突的部分,否则保存时反复打架。
- 安装必要依赖:
npm install eslint eslint-config-prettier eslint-plugin-prettier --save-dev -
.eslintrc.json必须包含:"extends": ["eslint:recommended", "plugin:prettier/recommended"] - 切勿单独写
"semi": ["error", "always"]这类规则——Prettier 已接管,ESLint 再校验就是冗余报错 - 验证是否成功:删掉一行末尾分号,保存后自动补上;改双引号为单引号,保存后自动转回
EditorConfig 是跨编辑器的兜底层
当团队里有人用 WebStorm、Sublime 或 Vim 时,Prettier 和 ESLint 插件可能不存在,但 .editorconfig 文件能强制所有编辑器统一基础行为,比如换行符是 lf 还是 crlf、JS 文件缩进用 2 个空格还是 4 个。
- 必须放在项目根目录,文件名是
.editorconfig(注意开头的点) - 关键配置示例:
[*]
end_of_line = lf
insert_final_newline = true
[*.{js,jsx,ts,tsx}]
indent_style = space
indent_size = 2
quote_type = single
-
indent_size和quote_type在这里只是基础约束,最终以.prettierrc为准;但end_of_line这种底层设置,EditorConfig 是唯一可靠来源 - VSCode 需要额外安装官方
EditorConfig for VS Code插件才生效
团队配置必须提交到 Git
把 .vscode/settings.json、.eslintrc.json、.prettierrc、.editorconfig 全部加入版本控制,不是可选项。否则新成员 clone 项目后,编辑器仍走默认配置,第一行代码就破坏风格一致性。
-
.vscode/settings.json只放编辑器行为相关项(formatOnSave、defaultFormatter),不放颜色主题、字体大小等个人偏好 - 避免
files.autoSave: "afterDelay"—— 未写完就保存会触发 ESLint 报错,干扰开发节奏 - 加一条 npm script:
"lint:fix": "eslint . --fix",CI 流程中跑一遍,堵住本地漏网之鱼
最容易被忽略的是 javascript.validate.enable 这个开关:它默认开启,会和 ESLint 并行校验,导致同一行出现两套报错提示。必须在 .vscode/settings.json 里设为 false,把校验权彻底交给 ESLint。


















