VSCode使用Emmet实现HTML自动补全的操作教程-VSCode-PHP中文网

输入div按Tab没反应，主因是emmet.triggerExpansionOnTab未启用或文件语言模式不匹配；需确保该设置为true、文件识别为HTML（或vue-html）、且emmet.includeLanguages包含对应映射。

vscode使用emmet实现html自动补全的操作教程

输入 `div` 按 Tab 没反应？先确认 Emmet 是否真正启用

VS Code 内置 Emmet，但默认行为可能被覆盖或禁用。最常见原因是 emmet.triggerExpansionOnTab 被设为 false，尤其在工作区 settings.json 中被误改。

检查方式：打开设置（Ctrl+,），搜索该配置项；或直接查看 settings.json，确保有：

"emmet.triggerExpansionOnTab": true

若为 false，Tab 键只缩进，不展开任何缩写
即使 html.suggest.html5 开启，div 也不会作为补全项出现在提示列表中——那是语言服务，不是 Emmet
输入后必须按 Tab，Enter 或 Space 不触发 Emmet 展开

`.vue` 文件里写 HTML 标签不补全？语言模式和 Emmet 映射要配对

VS Code 不会自动把 .vue 当作 HTML 处理，哪怕文件里全是。Volar 插件接管后，原生 html.* 设置基本失效。

两种路径可选：

用 Volar：启用 volar.autoInsertEmmetSupport，并确保 emmet.includeLanguages 包含 "vue-html": "html"

不用 Volar（如旧项目）：在 settings.json 中显式声明：

"files.associations": { "*.vue": "html" },<br>"emmet.syntaxProfiles": { "vue-html": "html" }

注意：仅改 files.associations 不够，emmet.syntaxProfiles 必须同步映射，否则 ul>li*3 在里仍不会展开

`html.autoClosingTag` 和 Emmet 自动闭合是两套机制，别混用

html.autoClosingTag 控制的是输入

 后是否自动插入

，它不依赖 Emmet，也不处理缩写展开。

而 Emmet 的 div →

是一次完整生成，中间没有“输入开始标签→等自动闭合”的过程。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

两者可共存，但行为互不干涉；关掉 html.autoClosingTag 不影响 div+Tab
若发现 输入后没闭合，先检查 editor.autoClosingBrackets 是否为 languageDefined（不是 always）
Prettier 或 ESLint 保存时重格式化，可能掩盖实时闭合效果，建议临时禁用测试


自定义标签或属性不提示？html.customData 才是正解
原生 HTML 补全只认标准元素和属性。 这类 Web Component 不会自动出现，size 也不会在属性值里提示 large/small。
必须手动注入 Schema：

准备一个 JSON Schema 描述你的组件（如 custom-elements.json）
在 settings.json 中添加：
"html.customData": ["./custom-elements.json"]

路径必须是相对于工作区根目录的，不能用 ~/ 或绝对路径
修改后需重启 VS Code 或重新加载窗口（Ctrl+Shift+P → Developer: Reload Window）

这个环节最容易被跳过，结果就是“明明写了组件库，补全还是空的”。