VSCode插件需组合Prettier、ESLint、EditorConfig三者才能落地前端代码规范：Prettier负责格式、ESLint检查逻辑、EditorConfig保障跨编辑器基础一致，缺一不可且须正确配置与提交。
VSCode 插件本身不直接“管理规范”，但通过组合配置 Prettier、ESLint、EditorConfig 三者，才能真正落地可执行、可继承、可验证的前端代码规范。单独装任一插件，都容易在保存时互相冲突或静默失效。
为什么 Prettier 和 ESLint 必须配对使用
很多人只装 Prettier，结果代码变“好看”了，但 undefined 变量、未关闭的 Promise、console.log 残留等逻辑问题依然存在；反之只装 ESLint，格式混乱、引号混用、括号换行不一致等问题又没人管。
-
Prettier是“格式裁缝”：只动空格、换行、引号、分号，不碰语义 -
ESLint是“逻辑哨兵”：检查变量作用域、异步风险、潜在 bug，但默认不修格式 - 两者规则重叠（比如单引号、结尾分号）会导致保存时反复拉扯——必须用
eslint-config-prettier关闭 ESLint 的格式类规则 - 推荐配置顺序：先配好
.eslintrc.js，再在settings.json中指定"editor.defaultFormatter": "esbenp.prettier-vscode"，并开启"editor.formatOnSave": true
EditorConfig 是团队协作的底线保障
当新人拉下项目、没装 ESLint 或 Prettier，甚至用其他编辑器（如 WebStorm）打开时，.editorconfig 文件仍能强制统一基础格式：缩进风格、换行符、字符编码。它不依赖插件，是 Git 提交前就该存在的最小公约数。
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 必须放在项目根目录，文件名是
.editorconfig（注意开头的点） - 常见内容示例：
[*] indent_style = space indent_size = 2 end_of_line = lf charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true
- VS Code 需安装
EditorConfig for VS Code插件才生效；其他编辑器也有对应支持，无需额外配置 - 它和 Prettier 不冲突：Prettier 覆盖更细粒度规则（如对象属性换行），EditorConfig 管的是编辑器底层行为
如何验证规范是否真正在运行
装完插件 ≠ 规范生效。常见失效场景包括：配置放错位置、插件版本不兼容、项目级配置被用户级覆盖。
立即学习“前端免费学习笔记（深入）”；
- 在任意
.js文件中故意写const a = 1; console.log(a);，保存后看是否自动删掉分号、把console标黄（ESLint 报no-console） - 检查右下角状态栏：应显示当前使用的格式化工具为
Prettier，且 ESLint 小图标有绿色对勾 - 运行
npx eslint --fix src/和npx prettier --write src/，确认命令行结果与编辑器内一致——这是 CI 流水线真正依赖的环节 - 如果某文件没生效，检查它是否被
.prettierignore或.eslintignore错误排除，或文件类型未被插件识别（如.ts文件没装 TypeScript 支持）
最易被忽略的一点：所有配置项（.eslintrc.js、.prettierrc、.editorconfig）必须提交进 Git。否则插件只是本地玩具，不是团队规范。
