如何配置VSCode强制遵循团队代码风格规范？

本文共计822个文字，预计阅读时间需要4分钟。

VSCode 本身不具备自动检测代码风格的功能，它依赖于外部工具如 ESLint、Prettier 和 EditorConfig 来识别和执行代码规范。配置这些工具的生效并非通过简单的开关操作，而是确保这些工具在项目上下文中正确加载，并优先使用用户级别的设置。

ESLint 必须本地安装且配置文件在根目录

VSCode 的 ESLint 插件默认只读取项目本地的 eslint 包和配置文件。全局安装的 ESLint 不会被识别，插件会静默失效。

• 在项目根目录运行 npm install --save-dev eslint（或 yarn add -D eslint）
• 用 npx eslint --init 生成 .eslintrc.cjs（推荐）或 .eslintrc.js，不要手动新建空文件
• 确保 VSCode 当前打开的是**项目根目录文件夹**，而非其子目录——否则插件找不到 node_modules 和配置文件
• 若用 TypeScript，必须额外安装 @typescript-eslint/parser 和 @typescript-eslint/eslint-plugin，并在配置中指定 parser

Prettier 和 ESLint 规则不能共存，必须显式对齐

ESLint 自带部分格式规则（如 quotes、indent），与 Prettier 冲突会导致保存时反复修正、波浪线不消失、甚至格式错乱。

• 安装 eslint-config-prettier 并在 .eslintrc.cjs 的 extends 中放在最后： ["eslint:recommended", "plugin:prettier/recommended"]
• .prettierrc 文件必须存在且路径正确（项目根目录），内容用纯 JSON 或 JS 导出，不要加注释
• VSCode 设置里禁用 ESLint 的格式类修复："editor.codeActionsOnSave": { "source.fixAll.eslint": true } 是安全的，但别同时开 "source.fixAll.prettier"
• 验证是否对齐：改一行引号后保存，如果只触发一次格式化且无红色波浪线提示“conflicting rule”，说明成功

EditorConfig 是跨编辑器底线保障，不是可选项

当团队里有人用 WebStorm、Sublime 或 GitHub Codespaces 时，.editorconfig 是唯一能强制统一缩进、换行、空格的通用机制——它比 Prettier 更底层，也更不可绕过。

• 安装 EditorConfig for VS Code 插件（仅此一个，别装其他同名变体）
• .editorconfig 必须放在项目根目录，且首行写 root = true
• 针对 Vue/JSX 等非标准后缀，要显式声明段落：[*.vue]、[*.jsx]，否则缩进规则不生效
• indent_style = space 不能写成 indent_style = "space" 或 indent_style = spaces，值必须小写无引号

最容易被忽略的是工作区设置覆盖项目配置：即使 .vscode/settings.json 里写了 "editor.tabSize": 4，只要 .editorconfig 存在且匹配当前文件，VSCode 就会无视它。真要强制团队规范，就得接受 EditorConfig 的绝对优先级——这不是 bug，是设计。