Emmet简介

Sublime Text 3 - Emmet 常用插件

Emmet 是 Sublime Text 中一款广受欢迎的插件，它提供了一系列高效实用的功能，可以大幅提升 HTML 和 CSS 的编写效率。通过使用简短的代码片段（称为缩写），Emmet 可以快速生成复杂的代码结构，从而简化开发流程。

缩写
div.container	创建一个 class 为 container 的 div 标签
ul>li*5	创建一个包含 5 个 li 子元素的 ul 列表
p#main-content	创建一个 id 为 main-content 的 p 段落
a[href="/link"]	创建一个链接，链接地址为 /link
img[src="image.png"]	创建一个 img 图像，图片路径为 image.png
.text-center	创建一个 class 为 text-center 的 CSS 样式，内容为 text-align: center
@media (max-width: 768px) { ... }	创建一个针对最大宽度为 768px 的屏幕尺寸的媒体查询

1. 在 Sublime Text 中，打开包控制（Ctrl + Shift + P 在 Windows 中，或 Cmd + Shift + P 在 macOS 中）
2. 输入 "install" 并选择 "Package Control: Install Package"
3. 在搜索框中输入 "emmet" 并安装 "Emmet" 插件

安装 Emmet 后，您可以在 HTML 和 CSS 代码中使用其缩写。只需输入缩写，然后按 Tab 键即可展开完整的代码结构。例如，要创建带有 3 个 li 子元素的 ul 列表，可以输入以下内容：

ul>li*3

按 Tab 键后，代码将扩展为：

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

Emmet 允许您创建自定义缩写以满足特定需求。要创建自定义缩写，请转到 "Preferences" -> "Package Settings" -> "Emmet" -> "Settings - User"。在文件中添加以下内容：

{
  "snippets": {
    "my-custom-snippet": "expand to whatever HTML you want"
  }
}

将 "my-custom-snippet" 替换为您要使用的自定义缩写，并将 "expand to whatever HTML you want" 替换为要展开的 HTML 代码。保存文件后，您就可以使用自定义缩写了。