vscode中javascript代码风格统一需editorconfig、prettier、eslint三层协同:editorconfig管缩进换行等编辑器行为,prettier负责结构格式化,eslint校验语义逻辑,缺一不可,否则规则冲突、保存覆盖、新人格式混乱。

VSCode 里 JavaScript 代码风格统一,靠单个插件不行,必须 EditorConfig + Prettier + ESLint 三层协同——缺一层,就容易在保存时互相覆盖、规则打架、新人拉代码后格式全乱。
EditorConfig 插件负责基础编辑器行为
它不碰语法,只管缩进、换行、空格这些“编辑器级”设置,且跨编辑器生效。装完插件后,.editorconfig 文件必须放在项目根目录,否则无效。
-
root = true是硬性要求,否则 VSCode 可能向上查找父目录的配置,导致意外覆盖 -
indent_size和tab_width要分开设:比如indent_style = space时,indent_size = 2生效;但若设成indent_style = tab,tab_width = 4才起作用 -
trim_trailing_whitespace = true和insert_final_newline = true建议默认开启,Git diff 里不会因为末尾空格或缺失换行产生脏改动 - 别用
[*.js]这种模糊匹配——JSX、TSX、.cjs/.mjs 文件可能被漏掉,推荐写成[*.{js,jsx,ts,tsx}]
Prettier 插件负责代码结构重排
它决定括号位置、引号类型、逗号要不要加、换行怎么断,是“格式化主力”。但注意:prettier-vscode 默认不启用保存时自动格式化,必须手动配。
- VSCode 设置中必须显式指定
"editor.defaultFormatter": "esbenp.prettier-vscode",否则即使装了插件,按Shift+Alt+F也可能调用别的 formatter -
.prettierrc里设"singleQuote": true后,ESLint 的quotes规则必须关掉(用eslint-config-prettier),否则保存时会来回切换引号 -
"printWidth": 80在现代宽屏开发中偏窄,团队可协商设为100或120,但要同步更新 ESLint 的max-len规则,否则报错 - 不要在
.prettierrc里配"semi": false然后又在 ESLint 里开"semi": ["error", "always"]——这两条直接冲突,VSCode 保存时会卡住或静默失败
ESLint 插件负责语义与逻辑校验
它不管空格缩进,专查 console.log、未使用变量、潜在 undefined 访问等。和 Prettier 配合时,关键在“分工清晰”。
-
eslint.validate必须包含"javascriptreact",否则 JSX 文件里的 ESLint 提示不显示 - 用
"extends": ["eslint:recommended", "prettier"]是常见写法,但要注意:这个prettier是指eslint-config-prettier包,不是 Prettier 本体——漏装这个包,ESLint 会把 Prettier 的格式规则也当错误报出来 -
"no-console": "warn"比"error"更实用:开发时允许调试,CI 阶段再用 husky + lint-staged 强制拦截 - ESLint 规则里带
fix标记的(如semi、quotes)才支持自动修复;像no-unused-vars这类纯检查项,只能提示,不能 save 时自动删变量
真正容易被忽略的是三者加载顺序和触发时机:EditorConfig 在文件打开瞬间就生效,Prettier 在保存时格式化,ESLint 则实时扫描+保存时修复。如果 .editorconfig 设了 indent_size = 4,但 .prettierrc 设了 tabWidth: 2,保存后你会看到缩进被强行改成 2——这不是 bug,是 Prettier 覆盖了 EditorConfig 的编辑器行为。所以最终视觉效果,以 Prettier 输出为准,EditorConfig 只做兜底和新文件初始化。











