vscode html问题90%源于插件冲突,需先确认语言模式为html,再启用html.validate.scripts、html.validate.styles和html.suggest.html5三项校验配置,并禁用prettier与auto close tag等相互干扰的插件。

VSCode 运行 HTML 时面板空白、标签不闭合不报错、格式化错乱、甚至保存后结构被破坏——这些问题 90% 不是代码写错了,而是多个插件在抢 HTML 的控制权。直接禁用一半插件再试,不如先看清谁在注册、谁在拦截、谁在覆盖。
HTML 面板空白或测试树不显示,先查是不是插件抢了 testController
如果你在 HTML 项目里用了 Jest 或 Mocha 测试(比如通过 jest-html-reporters 或自定义 runner),但测试面板(Test Explorer)完全灰白、连“刷新”按钮都无响应,大概率不是配置漏了,而是插件在争 vscode.testController 注册权。
- 按
Ctrl+Shift+I打开开发者工具 → Console 标签页,搜索testController或registerTestController - 看到
Cannot read property 'createTestController' of undefined?说明某个插件在 VSCode 测试 API 尚未就绪时就急着调用,典型是hbenl.vscode-jest-test-adapter和ms-python.python同时启用(后者虽为 Python 插件,但在某些工作区会误激活 JS 测试逻辑) -
code --disable-extensions启动后面板立刻恢复 → 确认冲突,下一步必须二分定位,别手动猜
HTML 标签不闭合不标红,根本不是插件没装,而是校验开关关着
写了 <div>
<p>hello 却没红色波浪线?不是 <code>Auto Close Tag 失效,也不是 Prettier 没配好,而是 VSCode 内置 HTML 语言服务的结构校验默认关闭。
- 必须手动开启三项设置:
html.validate.scripts、html.validate.styles、html.suggest.html5,全部设为true - 这些设置**只对语言模式为
html的文件生效**:右下角状态栏显示Plain Text或PHP时,点击切换成HTML - 快捷操作:按
Ctrl+Shift+P输入Error Squiggles→ 选Enable Error Squiggles;若命令不存在,就去 Settings JSON 里逐个确认那三项
Prettier + Auto Close Tag 同时开,标签越补越错
输完 <section></section> 回车,光标卡在中间;保存后 <div>
<p>xxx 被拆成多行却漏掉闭合标签;右下角 <code>ACT 图标亮着但敲 > 没反应——这不是 Bug,是两个插件在不同阶段改同一段文本。
-
Auto Close Tag在编辑时实时补全,Prettier在保存时重写结构,两者规则不一致(尤其htmlWhitespaceSensitivity和bracketSameLine) - 实操建议:
"prettier.disableLanguages": ["html"]关闭 Prettier 对 HTML 的接管;或在.prettierrc中强制设"htmlWhitespaceSensitivity": "css",并删掉所有htmlSelfClosingTag相关规则 - 禁用
emeraldwalk.runonsave类插件——它不等于编辑时补全,反而会和 ACT 触发链路冲突
Vue/JSX 文件里 <template></template> 不闭合,别信 HTML 设置
在 .vue 文件里写 <template><div> 却没提示补 <code>











