VSCode中ESLint与Prettier冲突的根本原因是多插件争抢editor.formatOnSave控制权，需手动明确指定editor.defaultFormatter为Prettier并禁用ESLint格式化能力，划清执行边界。
VSCode 插件不是越多越好，前端项目里真正能稳住编辑器不卡、不冲突、不拖慢保存/跳转/格式化流程的，通常不超过 8 个核心插件。装错一个监听 onSave 的格式化插件，就可能让 ESLint 和 Prettier 在保存瞬间互相覆盖，最终代码变“俄罗斯套娃”——你改了 A，它自动回滚 B，再触发 C 的重命名逻辑。
为什么 ESLint + Prettier 组合总出问题？
根本矛盾不在规则本身，而在执行时序和所有权归属。VSCode 默认只允许一个插件注册 editor.formatOnSave，但很多人同时启用：
-
esbenp.prettier-vscode（设为默认 formatter） -
dbaeumer.vscode-eslint（开启eslint.format.enable: true） - 还顺手装了
HookyQR.beautify或robertohuertasm.vscode-php-intellisense（后者会偷偷劫持 .vue 文件格式化）
结果：保存时三者争抢控制权，prettier 格式化完，eslint 立刻按自己规则重排，最后 beautify 再加一层缩进。解决办法只有一个：禁用所有非主格式化插件的自动格式化能力。在 settings.json 中明确指定：
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"eslint.format.enable": false,
"[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }
}
别信“它们能自动协商”——VSCode 没这机制，靠的是你手动划清边界。
立即学习“前端免费学习笔记（深入）”；
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
Live Server 启动后页面不刷新？检查这三个地方
不是插件坏了，是它默认只监听 .html 文件变化。你在写 Vue 单文件组件，改了 <template>，它根本收不到信号。常见误操作：
- 以为开了 Live Server 就等于 HMR（热更新），其实它只是个静态服务器，没打包器支持就只是“F5 刷新”
- 用
npm run serve同时开着，两个服务占同一端口，Live Server启动失败但 UI 不报错 - 路径含中文或空格，比如
C:\我的项目\src\index.html，Windows 下某些版本会静默失败
实操建议：
- 只对纯 HTML 原型页用
Live Server；Vue/React 项目一律用框架自带 dev server - 启动前先关掉其他占用
5500端口的进程（netstat -ano | findstr :5500） - 右键 HTML 文件 → “Open with Live Server”，别点底部状态栏的 Go Live 按钮——后者会尝试在当前工作区根目录起服务，容易路径错乱
Vue VS Code Extension Pack 和 Vue Helper 能不能共存？
能，但必须关掉其中一个的语法高亮或标签补全。两者都注册了 vue 语言服务器，同时启用会导致：
- 输入
v-时弹出两套指令提示（一套来自官方，一套来自vue-helper） -
alt + enter行为冲突：一个想换行，一个想展开模板片段 - 鼠标悬停变量时，有时跳转到
data()，有时跳转到setup()返回值，取决于哪个插件响应更快
推荐组合：
- 主力开发 Vue 3 Composition API → 用
Vue VS Code Extension Pack（官方维护，TS 支持更稳） - 老项目大量 Options API → 保留
vue-helper，但关闭它的vue.suggestion.autoImport和vue.suggestion.tagAutoComplete - 无论选谁，务必在
settings.json中加一句："vetur.validation.template": false（如果装了 Vetur 就禁用它，避免三方混战）
最常被忽略的点：插件之间没有“握手协议”。你看到的“协同工作”，其实是靠你手动关掉某一方的某个开关实现的。VSCode 不会替你做决策，它只提供钩子；谁注册、谁响应、谁覆盖，全由你配置决定。多一个插件，就多一条可能失控的事件链。
