掌握VSCode内置Emmet工具可极大提升前端开发效率。1. 输入!或html:5按Tab生成HTML5结构；2. 使用>、+、构建嵌套与兄弟元素，如div>ul>li3+p；3. 用#和.添加ID与class，[]设属性，{}填文本；4. CSS中m10转margin:10px，w100→width:100px，d:f生成display:flex；5. JSX需在设置中启用Emmet支持；6. 利用Balance命令快速选中标签结构；7. $@n控制生成序号起始值。熟练常用缩写并注意语法细节，能像打字一样快速编写代码。
在使用 VSCode 进行前端开发时，Emmet 是一个能极大提升 HTML 和 CSS 编写效率的内置工具。你不需要安装额外插件，只需掌握一些常用缩写语法，就能几秒内生成结构完整的代码。
HTML 快速生成结构
Emmet 提供了简洁的缩写方式来快速创建 HTML 元素和嵌套结构。
- 生成基础结构：输入 ! 或 html:5，按 Tab 键即可生成标准的 HTML5 文档结构。
- 子元素与兄弟元素：div>ul>li*3+p 会生成一个 div，内部包含一个 ul（含 3 个 li）和一个 p 标签。
-
ID 与 Class：用 # 定义 ID，. 定义 class。例如 header.container#main 生成
。 - 属性与文本：使用 [] 添加任意属性，{} 插入文本内容。如 a[href="#"][target="_blank"]{点击这里} 会生成带链接和文本的锚点。
CSS 缩写提速样式编写
Emmet 同样支持 CSS 属性的简写输入，减少重复敲击。
- 属性缩写：输入 m10 按 Tab，会变成 margin: 10px;。p5 转为 padding: 5px;。
- 尺寸与颜色：w100 → width: 100px;，c#0 → color: #000;。
- 多值快捷输入：比如 m10a 表示 margin: 10px auto;，常用于居中布局。
- Flex 布局缩写：d:f 生成 display: flex;，再加 jc:c 就是 justify-content: center;。
VSCode 中的实用技巧
结合 VSCode 的功能，Emmet 可以更高效。
立即学习“前端免费学习笔记（深入）”；
- 触发补全：在 HTML 或 CSS 文件中输入缩写后，按 Tab 或 Enter 即可展开。如果没反应，检查设置中是否启用了 Emmet。
- 在 JSX 中使用：默认情况下 Emmet 不在 JSX 中生效，可在设置中搜索 "emmet include languages"，添加 "javascript": "javascriptreact" 来启用。
- 反向折叠（Balance）：将光标放在标签内，使用命令 Emmet: Balance (outward/inward) 可快速选中外层或内层标签结构。
- 更新多个数字值：使用 img[src=item$@2.png] + *3，会生成 item2.png、item3.png、item4.png，$@2 表示起始值为 2。
基本上就这些。熟练使用 Emmet 后，写页面结构和样式就像打字一样快，关键是多练常用缩写，让它成为肌肉记忆。不复杂但容易忽略细节，比如括号匹配和乘法符号的位置，稍不注意就无法展开。多试几次，自然就顺了。
