VSCode 无法自动补全 HTML 标签，90% 是语言模式或 Emmet 触发配置没对，不是插件坏了，也不是要重装。

为什么输入 div 按 Tab 没反应？

Emmet 默认只在特定语言模式下响应缩写，且依赖明确的触发字符。常见失效原因：

• 右下角状态栏显示的是 Plain Text、JavaScript 或 Vue（未启用 Volar），而非 HTML
• emmet.triggerExpansionOnTab 被设为 false（尤其在工作区 settings.json 中被覆盖）
• 输入时末尾没跟 > 或空格，比如敲完 div 直接按 Enter，但 Enter 不是默认触发键（Tab 才是）
• 在 .js 或 .vue 文件里写 HTML 片段，但 files.associations 没映射对应后缀

验证方式：新建一个 test.html，输入 !+Tab，能生成完整 HTML5 模板就说明 Emmet 本身正常。

如何让 .vue 或 .jsx 文件也支持 HTML 补全？

VSCode 不会自动把非 .html 文件当 HTML 处理，必须显式声明语法关联和 Emmet 映射：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

立即学习“前端免费学习笔记（深入）”；

• 在 settings.json 中添加："files.associations": { "*.vue": "html", "*.jsx": "javascriptreact" }
• 同时配好 Emmet 语法映射："emmet.syntaxProfiles": { "vue-html": "html", "javascriptreact": "jsx" }
• Vue 项目强烈建议换用 Volar 插件，并开启 volar.autoInsertEmmetSupport，否则 emmet.includeLanguages 配置可能被忽略
• 注意：Volar 启用后，原生 html.suggest.* 设置基本无效，补全逻辑由它接管

class="" 里不提示项目中的 CSS 类名？

VSCode 原生 HTML 补全不解析 CSS，class 属性值补全是独立功能，需额外条件：

• 必须安装插件：IntelliSense for CSS class names in HTML（支持普通 CSS/SCSS）或 Tailwind CSS IntelliSense（Tailwind 专用）
• 插件默认只扫描 ./src/**/*.css，若样式在 assets/styles/ 下，得加配置："css.styleSheets": ["assets/styles/*.css"]
• css.validate 必须为 true（默认开启），且文件不能被 files.exclude 隐藏
• CSS-in-JS（如 styled-components）、@apply 等写法不会被识别，这类场景只能靠插件定制或放弃自动补全

为什么 html.autoClosingTag 开了还是不闭合？

自动闭合标签和 Emmet 是两套机制，容易互相干扰：

• 确认 html.autoClosingTag 是 true，且 editor.autoClosingBrackets 设为 languageDefined（不是 always）
• Prettier、ESLint 等格式化插件可能在保存时重写结构，掩盖实时闭合效果；可临时禁用它们测试
• 在 .vue 文件中，Volar 的 volar.autoImportCompletion 若开启，会接管补全行为，此时原生 html.autoClosingTag 不生效
• 输入 <div 后必须紧跟 > 或空格再按 Tab，如果中间有换行或制表符，闭合逻辑可能中断

最易被忽略的一点：多个配置层级（用户级、工作区级、远程容器级）可能互相覆盖，修改后务必检查设置面板右上角的“层级标识”，并用 Ctrl+Shift+P → Reload Window 强制刷新语言服务器。