最稳路径是手动编辑settings.json:需同时设"editor.formatOnSave": true和"editor.defaultFormatter": "esbenp.prettier-vscode",并确保.eslintrc.js中extends末尾含"prettier"以禁用冲突规则。

直接改 settings.json 是最稳的路径
VSCode 的图形化设置(Ctrl+,)适合初探,但一旦涉及插件联动、语言特异性规则或保存即格式化等关键行为,手动编辑 settings.json 才能避免界面勾选遗漏、覆盖失效或顺序冲突。比如 editor.formatOnSave 开启后,若没同时指定 editor.defaultFormatter,VSCode 可能随机调用某个已安装的格式器,导致 Vue 文件被 Prettier 格式化而 JS 文件被 ESLint 自动修复,结果风格不一致。
- 按
Ctrl+Shift+P输入Preferences: Open Settings (JSON)直接打开配置文件 - 在顶层对象内添加字段,不要嵌套在注释块或无效结构里
- 修改后保存即生效,无需重启(个别插件如主题或语言包除外)
Prettier 和 ESLint 共存必须处理规则冲突
两者都装了却没配好,常见现象是:保存时代码反复“抖动”——先按 Prettier 缩进 2 空格,再被 ESLint 强制改成 4 空格;或者单引号被 Prettier 统一,又被 ESLint 报错“应使用双引号”。这不是插件问题,是规则没对齐。
- 必须安装
eslint-config-prettier(禁用所有与格式相关的 ESLint 规则)和eslint-plugin-prettier(把 Prettier 当作 ESLint 的一个规则来运行) - 在项目级
.eslintrc.js中加入:extends: ["eslint:recommended", "plugin:prettier/recommended"] - VSCode 设置中固定格式器:
"editor.defaultFormatter": "esbenp.prettier-vscode",并确保"editor.formatOnSave": true
别忽略语言专属配置项
同一个插件在不同语言下行为可能完全不同。例如 Path Intellisense 默认只补全 JS/TS 的 import 路径,对 Vue 的 <img :src="..."> 或 CSS 的 @import 不生效;Auto Rename Tag 默认支持 HTML/XML,但 Vue 的 <template> 块需要额外启用 vetur.grammar.customBlocks 配置才能识别自定义标签。
- 检查插件文档里是否提供
xxx.language类配置项,比如prettier.vueIndentScriptAndStyle控制 Vue 脚本缩进 - 语言相关设置建议写在
"[vue]": { ... }这类语言作用域块内,而非全局扁平配置 - 对
javascript和typescript要分开配,TypeScript 的类型提示依赖typescript.preferences.includePackageJsonAutoImports等独立开关
自动保存不是万能的,得看场景
"files.autoSave": "onFocusChange" 看似省心,但在调试 Node.js 服务或运行 Webpack Dev Server 时,焦点切到终端就触发保存,可能造成热更新中断或构建失败。更稳妥的做法是分场景控制:
- 日常编辑:用
"files.autoSave": "afterDelay"+"files.autoSaveDelay": 1000(延迟 1 秒) - 前端项目:配合
Live Server插件,仅对.html启用"files.autoSave": "onWindowChange",其他文件仍手动保存 - Git 提交前检查:关闭自动保存,靠
husky+lint-staged在 commit 时统一格式化,避免本地误提交未格式化代码
真正卡住人的往往不是插件装不装,而是配置之间有没有形成闭环——比如开了 formatOnSave 却没设默认格式器,或装了 ESLint 却没在项目里初始化配置。这些点不显眼,但会持续消耗判断力。


















