编程技巧总结

VS Code 中 HTML 与 Emmet 快捷编写

在 VS Code 里写 HTML，最常用的是 Emmet（已内置，一般不用单独装）。在 .html 或支持 Emmet 的文件里输入缩写，按 Tab（或设置里绑定的 Emmet 展开 键，有时是 Enter）即可展开成标签。

标签 + class / id

输入	展开大致为
div	<div></div>
div.wrap	<div class="wrap"></div>
div#main	<div id="main"></div>
p.note.error	<p class="note error"></p>

多个 class 用 . 连在一起即可。

子级、同级、上级

含义	写法	示例效果
子元素	>	nav>ul>li → nav 里 ul，ul 里 li
兄弟	+	div+p → 两个并列标签
上一级	^	div>p^footer → p 在 div 里，footer 与 div 同级

重复（列表常用）

• ul>li*5 → 5 个 <li>
• div.item*3 → 3 个带 class="item" 的 div

属性

• a[href=# title=首页] → 带 href、title 的 <a>
• input[type=text] → 对应属性

假文（Lorem）

• lorem → 一段默认长度的占位文
• lorem10 → 约 10 个词（数字可改）
• p>lorem → 段落里包一段 lorem

具体词数可能随 Emmet 版本略有差异，以编辑器里实际展开为准。

隐式标签名（可选）

在部分上下文里可省略标签名，例如 .box 在 HTML 里常展开为带 class="box" 的 div（依赖 Emmet 的隐式规则）。

按 Tab 不展开时排查

1. 设置里搜 Emmet: Trigger Expansion On Tab，确认已开启。
2. 光标放在缩写末尾再按 Tab。
3. 文件语言模式应是 HTML（右下角语言标识）。
4. 或者重启一下编辑器。

其它与 HTML 相关的习惯

• 自动闭合标签：设置里 html.autoClosingTags。
• 重命名配对标签：可安装「Auto Rename Tag」类扩展，改一侧标签名另一侧同步。
• 格式化：Shift + Alt + F（Windows）整理缩进。
• 用户代码片段：文件 → 首选项 → 配置用户代码片段，自定义整块 HTML 模板。

在 Vue / React 模板 中使用 Emmet 时，若默认不生效，可在 settings.json 里用 emmet.includeLanguages 把对应语言映射到 html（按实际技术栈配置）。