vscode默认不格式化javascript,必须安装prettier或eslint插件并显式配置"[javascript]": {"editor.defaultformatter": "esbenp.prettier-vscode"},同时启用editor.formatonsave和editor.codeactionsonsave,配合.vscode/settings.json、.prettierrc、.eslintrc.js及.editorconfig统一提交,才能实现可靠自动格式化。

VSCode 默认不格式化 JavaScript,必须手动指定格式化器
VSCode 自带的 JavaScript 格式化能力极弱,javascript.format.* 系列设置早已被弃用,实际生效的是你装的插件和 editor.defaultFormatter 配置。不明确指定,保存时根本不会动你的 JS 代码——哪怕你开了 editor.formatOnSave。
常见错误现象:保存后缩进没变、单引号没转双引号、行尾分号没加/没删,甚至报错“没有可用的格式化程序”。这是因为 VSCode 找不到能处理 javascript 语言的格式化器。
- 必须安装
Prettier - Code formatter(ID:esbenp.prettier-vscode)或ESLint(ID:dbaeumer.vscode-eslint)之一 - 在
settings.json中显式设置:"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}或"[javascript]": {"editor.defaultFormatter": "dbaeumer.vscode-eslint"} - 不要只设全局
editor.defaultFormatter,JS 文件类型优先级高于全局,不单独声明会 fallback 到空
ESLint 和 Prettier 职责不能混,否则格式越修越乱
ESLint 的 source.fixAll.eslint 动作和 Prettier 的 format 动作本质不同:前者修逻辑问题(如 no-unused-vars),后者只调格式(如换行、引号)。强行让 ESLint 去格式化,会触发它内置的旧格式规则(比如强制加分号),跟 Prettier 冲突。
典型症状:保存一次,引号变了;再保存一次,分号又加回来;第三次又没了——反复横跳。
- 如果用 Prettier 做格式主力,关掉 ESLint 的格式化能力:
"eslint.formatEnable": false - 启用 ESLint 的修复动作仅限于规则类问题:
"editor.codeActionsOnSave": {"source.fixAll.eslint": true} - 必须安装
eslint-config-prettier并在.eslintrc.js中extends: ["eslint:recommended", "prettier"],否则冲突无法消除
项目级配置比用户级配置更可靠,.vscode/settings.json 必须提交
团队里有人格式正常、有人一团糟,大概率是有人依赖自己的全局设置,而项目没提供统一入口。VSCode 读配置的优先级是:文件夹级(即 .vscode/settings.json) > 用户级 > 默认值。只配用户级,新人 clone 仓库后完全无效。
容易踩的坑:把 .vscode 加进 .gitignore,或者误以为“装了插件就万事大吉”。
-
.vscode/settings.json应该和.prettierrc、.eslintrc.js一起提交到 Git - 内容至少包含:
editor.formatOnSave、[javascript]语言块、editor.codeActionsOnSave三项 - 别漏掉
"eslint.validate": ["javascript", "javascriptreact"],否则 .tsx 或 JSX 文件里的 ESLint 提示不触发
EditorConfig 是跨编辑器底线,不是可选项
即使你不用 Prettier 或 ESLint,只要团队里有人用 WebStorm、Vim 或 Sublime,.editorconfig 就是唯一能保住基础一致性的手段。它管的是缩进风格、换行符、空格/Tab 这些底层行为,VSCode 插件全靠它打底。
没它的话,Windows 用户回车变成 CRLF,别人 git diff 里全是 ^M;有人用 4 空格缩进写 Vue,别人打开直接错位。
- 根目录建
.editorconfig,内容至少含:indent_style、indent_size、end_of_line、charset、trim_trailing_whitespace - VSCode 需要安装
EditorConfig for VS Code插件(ID:editorconfig.editorconfig)才识别该文件 - 注意:
[*.js]这种写法无效,EditorConfig 不支持按语言匹配,只能用通配符[*]或扩展名[*.json]
真实项目里最常被忽略的,是 .editorconfig 和 .vscode/settings.json 的协同失效:一个管缩进,一个管格式化,但两者参数打架(比如一个设 2 空格,Prettier 设 4),结果谁也救不了谁。











