VSCode Emmet缩写：快速HTML/CSS开发技巧

掌握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 生成 <header class="container" id="main"></header>。
• 属性与文本：使用 [] 添加任意属性，{} 插入文本内容。如 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 可以更高效。

巧文书

巧文书是一款AI写标书、AI写方案的产品。通过自研的先进AI大模型，精准解析招标文件，智能生成投标内容。

61

查看详情

立即学习“前端免费学习笔记（深入）”；

• 触发补全：在 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 后，写页面结构和样式就像打字一样快，关键是多练常用缩写，让它成为肌肉记忆。不复杂但容易忽略细节，比如括号匹配和乘法符号的位置，稍不注意就无法展开。多试几次，自然就顺了。

以上就是VSCode Emmet缩写：快速HTML/CSS开发技巧的详细内容，更多请关注php中文网其它相关文章！