VSCode怎么开启HTML代码自动补全功能-VSCode-PHP中文网

输入div按Tab没反应，90%是emmet.triggerExpansionOnTab为false、语言模式非HTML或未在缩写后加空格/＞；验证方式为新建test.html输入!+Tab能否生成HTML5模板。

vscode怎么开启html代码自动补全功能

VSCode 默认已启用 HTML 基础补全，但多数人遇到的“不补全”不是功能关闭，而是 Emmet 触发逻辑或语言模式没对上——输 div 按 Tab 没反应，90% 是这个原因。

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

Emmet 的缩写展开（如 div →

）不是靠语言服务，而是靠独立的触发机制。它只在特定条件下响应：

emmet.triggerExpansionOnTab 必须为 true（关掉后 Tab 完全无效）
右下角语言模式必须是 HTML，不是 Plain Text、Vue 或 JavaScript
输入完缩写后，**必须紧跟空格或 > 再按 Tab**；敲完 div 直接换行或按 Enter 不会触发
验证是否正常：新建 test.html，输入 ! + Tab，能生成完整 HTML5 模板就说明 Emmet 本身没问题

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

VSCode 不会自动把非 .html 文件当 HTML 处理，必须手动映射语法和 Emmet 行为：

在 settings.json 中加："files.associations": { "*.vue": "html", "*.jsx": "javascriptreact" }
同时配 Emmet 映射："emmet.syntaxProfiles": { "vue-html": "html", "javascriptreact": "jsx" }
Vue 项目建议用 Volar 插件，并开启 volar.autoInsertEmmetSupport；否则 emmet.includeLanguages 可能被忽略

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

VSCode 原生 HTML 补全**完全不读 CSS 文件**，class 属性值补全是独立能力，必须靠插件实现：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

装插件：IntelliSense for CSS class names in HTML（普通 CSS/SCSS）或 Tailwind CSS IntelliSense（Tailwind）
确保 editor.suggest.showClasses 和 editor.quickSuggestions.strings 都设为 true
如果样式在 assets/styles/ 下，要加配置："css.styleSheets": ["assets/styles/*.css"]
CSS-in-JS（如 styled-components）、@apply、动态拼接类（如 clsx()）均不支持

输入 `后为什么不自动补`？

标签自动闭合和 Emmet 是两套机制，容易互相覆盖或被格式化插件干扰：

确认 html.autoClosingTag 为 true（不是 emmet 相关设置）
检查 editor.autoClosingBrackets 是否设为 languageDefined（设成 always 可能导致冲突）
Prettier、ESLint 等保存时格式化会重写结构，掩盖实时闭合效果；可临时禁用测试
在 .vue 文件中，Volar 的 volar.autoImportCompletion 若开启，会接管补全，此时原生 html.autoClosingTag 不生效