vscode可通过ESLint、Pretterr和EditorConfig等插件配合.eslintrc、.prettierrc、.editorconfig及.vscode/settings.json三层配置,实现代码规范的自动检查、格式化与团队统一落地。

VSCode 本身不强制任何编码规范,但通过合理配置插件、设置和规则文件,可以自动检查、格式化并约束代码风格,让开发行为贴合公司统一标准。
安装核心插件
这些插件是落地编码规范的基础工具:
- ESLint:用于 javaScript/typescript 的静态检查,支持自定义规则(如禁用 var、要求缩进为 2 空格、函数命名必须小驼峰等)
- Prettier:专注代码格式化(换行、引号、括号位置等),可与 ESLint 协同,避免规则冲突
- EditorConfig for VS Code:读取项目根目录的 .editorconfig 文件,统一基础编辑行为(如字符编码、行尾符、缩进风格)
- 对应语言插件(如 python、go、C#):提供语法高亮、智能提示及语言专属 Linter 支持
配置项目级规则文件
把规范“写进文件”,而非只靠口头传达。常见做法:
- 在项目根目录放 .eslintrc.js 或 .eslintrc.json,继承公司统一的 ESLint 配置包(如 @company/eslint-config-base)
- 添加 .prettierrc 明确格式细节,例如:{“semi”: false, “singleQuote”: true, “tabWidth”: 2}
- 配置 .editorconfig 统一基础编辑习惯:indent_style = space、indent_size = 2、end_of_line = lf
- 若使用 TypeScript,确保 tsconfig.json 中开启 “strict”: true 及公司要求的检查项(如 “noImplicitAny”)
调整 VSCode 设置(推荐工作区设置)
在项目根目录的 .vscode/settings.json 中配置,确保团队成员开箱即用:
- 启用保存时自动修复:“editor.codeActionsOnSave”: {“source.fixAll.eslint”: true}
- 设 Prettier 为默认格式化工具:“editor.defaultFormatter”: “esbenp.prettier-vscode”
- 关闭可能干扰的格式化选项:“editor.formatOnSave”: true,但禁用 “editor.formatOnType”(避免输入中途乱跳)
- 指定文件关联格式器,例如:“[javascript]”: {“editor.defaultFormatter”: “esbenp.prettier-vscode”}
验证与持续保障
配置不是一劳永逸,需验证是否真正生效:
- 手动触发格式化(Shift+Alt+F)或保存后观察代码变化
- 故意写一条违规代码(如用双引号、多一个空格),看 ESLint 是否标红并给出修复建议
- 在终端运行 npx eslint . –ext .js,.ts 检查全量问题,确认规则加载正确
- 把配置文件纳入 git,配合 CI(如 github Actions)在提交前校验,防止本地漏配
基本上就这些。关键不是堆砌插件,而是用 .eslintrc + .prettierrc + .vscode/settings.json 三层联动,把公司规范变成可执行、可验证、不依赖个人记忆的自动化流程。