vscode默认通过emmet实现html标签自动闭合,需确保editor.autoclosingtags为false且emmet.includelanguages包含"html",输入后敲>即可生成,无需额外插件。

Emmet 默认就支持 HTML 标签自动闭合,但常被误关
VSCode 内置 Emmet,div 输入后敲 > 就会自动生成 <div></div>,根本不用装额外插件。但很多人发现这功能“失效”,其实是被两个设置关掉了:
-
editor.autoClosingTags 设为 true 时,VSCode 自带的闭合逻辑会和 Emmet 冲突,导致补全错乱或重复插入
-
emmet.includeLanguages 里没包含 "html",尤其在非 .html 文件(比如 .vue 或 .jsx)中写 HTML 片段时,Emmet 直接不响应
正确做法是:在设置里搜 autoClosingTags,设为 false;再搜 emmet include,确认 html 在列表里。不需要重启,改完立刻生效。
Auto Close Tag 插件只在特定场景有用,别盲目装
它解决的是 <div> 手动输入后、还没敲 <code>> 时的提前闭合——比如你打完 <div> 就按 <code>Enter 或 Space,它能补上 >
。但这和 Emmet 的
> 触发逻辑完全不同,也容易和 Prettier、格式化工具打架。
- 只建议在写 XML 或老旧模板引擎(如 Handlebars)时启用,HTML 场景下优先用 Emmet
- 若真要装,必须关掉
editor.autoClosingTags,否则 <div> 可能变成 <code><div></div>
配置项 auto-close-tag.SublimeTextMode 开启后,对 Enter 和 Space 敏感,但会干扰代码折叠和多光标操作
Auto Rename Tag 不是“万能同步”,只认成对标签
它只对合法的开始/结束标签对起作用,比如 <header>...</header>。以下情况它完全没反应:
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
下载
-
<img>、<br> 这类自闭合标签,改开头不会动结尾(因为本来就没结尾)
- 标签没写闭合,比如只写了
<div>,后面漏了 <code>
,插件无法匹配,自然不联动
语言模式不是 html 或 vue-html,右下角显示 Plain Text 时,插件直接休眠
真正依赖它的场景,是大型 HTML 模板里嵌套深、首尾相隔几十行时,改一个 <section></section> 就能省去滚动查找的麻烦。
Prettier 和 Emmet 配合不好,标签换行会乱
如果你用 Prettier 格式化 HTML,prettier.bracketSameLine 设为 true 会让 <div class="a"> 紧贴着内容写,而 Emmet 默认生成的是换行风格。两者一碰,就会出现格式反复抖动:保存 → 换行 → 格式化 → 合并 → 再保存 → 又换行。
<ul>
<li>推荐统一用 <code>prettier.bracketSameLine: false,保持 Emmet 默认输出风格
禁用 prettier.htmlWhitespaceSensitivity 的 "strict" 模式,否则空格缩进会被误判为内容
Live Server 启动后,浏览器地址必须是 http://127.0.0.1:5500/,不是 file://,否则 Prettier 的路径解析可能出错
最麻烦的其实是嵌套缩写生成后的首次格式化——Emmet 输出的结构紧凑,Prettier 第一次跑会重排所有缩进,这时候得忍一忍,之后就稳定了。