VSCode如何优化HTML自动补全体验？实用设置整理-VSCode-PHP中文网

VS Code默认不提示input type引号内合法值，因原生HTML语言服务将type视为普通字符串而非W3C枚举字段；需启用html.suggest.html5和editor.quickSuggestions.strings并重载窗口。

vscode如何优化html自动补全体验？实用设置整理

VS Code 默认的 HTML 补全体验是“能用但常卡壳”——input type="里敲 t 不出 text，class="里输 btn 不列项目里的类名，改个

 为  还得手动同步闭合标签。这不是你配置漏了，而是默认策略压根没打开语义层补全。

为什么 input type=" 引号内不提示合法值？
VS Code 原生 HTML 语言服务不主动识别 type 这类强约束属性的取值范围，它把 type="t" 当成普通字符串处理，而非 W3C 规范定义的枚举字段。补全引擎根本不知道该弹什么。

必须启用 html.suggest.html5（设为 true），否则连 email、date、color 这些标准值都不会出现

editor.quickSuggestions.strings 必须为 true，否则双引号内完全不触发任何建议
别信 UI 设置界面里“自动建议”的开关——它可能只作用于当前工作区；直接改 settings.json 才可靠
改完务必执行 Developer: Reload Window，部分设置热加载不生效

如何让 class=" 自动提示项目真实 CSS 类名？
原生 VS Code 对 class 属性值不做文件扫描，它没有读你的 src/styles/*.css 或 assets/tailwind.css。类名补全不是配置问题，是能力缺失。

装插件 IntelliSense for CSS class names in HTML（注意名字带 in HTML）
确认 editor.suggest.showClasses 和 editor.quickSuggestions.strings 都为 true

如果样式文件不在默认路径（如 ./src/**/*.css），需加配置："css.styleSheets": ["assets/styles/*.css"]

Tailwind 用户请换用 tailwindcss-intellisense，原生 CSS 类插件对 @apply 或 class="btn-sm" 这种动态拼接无效


Auto Rename Tag 同步失败的三个硬伤点
这个插件靠文本匹配而非 AST 解析，所以非常脆弱——它不看语法是否合法，只看光标所在位置能不能“对上”。稍有偏差就静默失效。

											
												
												
													DeepBI DHTML 页面生成器
													生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：

- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；  
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；  
- 提及位于 `apps/console/src/featur
												
												下载
												
											
										

改标签名前，必须双击选中整个标签名（如 div），不能只光标停在中间或只选了 di

结束标签里有空格（如  div>）或换行错位，匹配立即失败
Vue 单文件组件中，若用了 lang="pug" 或 lang="ts"，插件默认不监听；只对 lang="html" 或纯 .html 文件有效


Auto Close Tag 和内置 html.autoClosingTag 的冲突真相
VS Code 1.84+ 内置了 html.autoClosingTag，它和 Auto Close Tag 插件会互相压制——通常内置功能赢，插件变哑巴。

必须显式关掉内置功能："html.autoClosingTag": false

插件本身要开两个关键开关："auto-close-tag.enableAutoCloseTag": true 和 "auto-close-tag.enableAutoCloseSelfClosingTag": true

Vue 文件需加语言支持："auto-close-tag.activationOnLanguage": ["html", "vue"]，否则  块内不响应
如果用了 Prettier，务必关掉 editor.formatOnType，否则补全后立刻格式化会导致光标跳到奇怪位置

最常被忽略的是：所有这些补全行为都严格依赖当前文件的语言模式。右下角显示 Plain Text 或 Vue（非 vue-html）时，html.suggest.html5 和 Emmet 指令补全全部失效——它不是坏了，是根本没启动。