请提供具体的文章内容,我将根据要求生成符合规范的摘要。

输入
VSCode 默认支持输入 HTML 语言模式(右下角状态栏显示“HTML”,不是“Plain Text”或“Auto”),且未被插件或设置禁用。最常见失效原因是文件未保存(.html 后缀未绑定)或误设为其他语言。
检查并操作以下三点:
- 点击右下角语言标识,手动选为
HTML - 在设置搜索框中搜
editor.suggest.snippetsPreventQuickSuggestions,确保值为false(设为true会屏蔽 Emmet 片段提示) - 确认
editor.quickSuggestions对html语言开启:"[html]": { "editor.quickSuggestions": true }
为什么输 没弹出 ?Emmet 是主力,不是语言服务
VSCode 的 HTML 标签缩写补全(如 di → )本质由 Emmet 驱动,不是 HTML 语言服务器原生能力。若不生效,大概率是 Emmet 触发逻辑被关了。
必须确保以下两项在 settings.json 中存在且有效:
-
"emmet.triggerExpansionOnTab": true —— 关掉后按 Tab 不会展开任何缩写
-
"emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFiles" —— 若设为 "never",连 都不会提示
注意:仅在 HTML 文件中生效;.vue 或 .svelte 需额外配置 emmet.includeLanguages。
在 .vue / .jsx 里想用?不能靠 html.autoClosingTag
html.autoClosingTag 只对语言 ID 为 html 的文件生效,它在 .vue 的 区域或 .jsx 中完全不起作用。
htmlppt.skill
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件(幻灯片风格)。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本,并且希望生成演示用的 HTML 时触发。支持任意内容来源:iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区,并通过企微直接发送给用户。触发词示例:帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
下载
替代方案分场景:
-
.vue 文件:加配置 "emmet.includeLanguages": {
"vue-html": "html"
},让 Emmet 把 vue-html 当作 HTML 处理
-
.jsx / .tsx:用 "emmet.includeLanguages": {
"javascriptreact": "html",
"typescriptreact": "html"
},这样输 div + Tab 就能展开
- 别碰
html.autoClosingTag 去“适配”非 HTML 模式——它压根不监听那些语言 ID
补全后光标卡在错误位置?格式化和缩进在打架
常见现象:输完 div + Tab,光标跳到
内部,或自动缩进多了一层空格。这不是补全逻辑错了,而是 editor.formatOnType 在补全后立刻触发格式化,干扰了光标定位。
解决方法很直接:
- 关掉实时格式化:
"editor.formatOnType": false(尤其搭配 Prettier 时)
- 固定缩进宽度:
"editor.tabSize": 2,避免不同插件对 tab 的解释不一致
- 如果用了 Auto Close Tag 插件,注意它和 VSCode 原生
html.autoClosingTag 冲突,1.84+ 版本建议只留其一
真正麻烦的是混合场景:比如在 Vue SFC 里写 JSX 片段,或模板中嵌 Markdown。这时候 Emmet、Volar、Prettier 三者策略不统一,得靠语言块配置隔离行为,而不是全局一刀切。
?Emmet 是主力,不是语言服务
VSCode 的 HTML 标签缩写补全(如 di → )本质由 Emmet 驱动,不是 HTML 语言服务器原生能力。若不生效,大概率是 Emmet 触发逻辑被关了。
必须确保以下两项在 settings.json 中存在且有效:
-
"emmet.triggerExpansionOnTab": true —— 关掉后按 Tab 不会展开任何缩写
-
"emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFiles" —— 若设为 "never",连 都不会提示
注意:仅在 HTML 文件中生效;.vue 或 .svelte 需额外配置 emmet.includeLanguages。
在 .vue / .jsx 里想用?不能靠 html.autoClosingTag
html.autoClosingTag 只对语言 ID 为 html 的文件生效,它在 .vue 的 区域或 .jsx 中完全不起作用。
htmlppt.skill
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件(幻灯片风格)。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本,并且希望生成演示用的 HTML 时触发。支持任意内容来源:iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区,并通过企微直接发送给用户。触发词示例:帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
下载
替代方案分场景:
-
.vue 文件:加配置 "emmet.includeLanguages": {
"vue-html": "html"
},让 Emmet 把 vue-html 当作 HTML 处理
-
.jsx / .tsx:用 "emmet.includeLanguages": {
"javascriptreact": "html",
"typescriptreact": "html"
},这样输 div + Tab 就能展开
- 别碰
html.autoClosingTag 去“适配”非 HTML 模式——它压根不监听那些语言 ID
补全后光标卡在错误位置?格式化和缩进在打架
常见现象:输完 div + Tab,光标跳到
内部,或自动缩进多了一层空格。这不是补全逻辑错了,而是 editor.formatOnType 在补全后立刻触发格式化,干扰了光标定位。
解决方法很直接:
- 关掉实时格式化:
"editor.formatOnType": false(尤其搭配 Prettier 时)
- 固定缩进宽度:
"editor.tabSize": 2,避免不同插件对 tab 的解释不一致
- 如果用了 Auto Close Tag 插件,注意它和 VSCode 原生
html.autoClosingTag 冲突,1.84+ 版本建议只留其一
真正麻烦的是混合场景:比如在 Vue SFC 里写 JSX 片段,或模板中嵌 Markdown。这时候 Emmet、Volar、Prettier 三者策略不统一,得靠语言块配置隔离行为,而不是全局一刀切。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










