Emmet 是一个强大的代码生成工具，可以大幅提高网页开发效率。在 Sublime Text 中安装 Emmet 插件，可以让你在编写 HTML 和 CSS 代码时更加高效。

安装步骤

  1. 打开 Sublime Text。
  2. 点击菜单栏的 Preferences > Package Control > Install Package。
  3. 在搜索框中输入 Emmet，然后点击安装。

安装 Emmet 插件

常用快捷键

  • Ctrl+Alt+P：展开 Emmet 快捷菜单。
  • Ctrl+E：展开 HTML 结构。
  • Ctrl+Shift+E：展开 CSS 结构。
  • Ctrl+Alt+I：插入 Emmet 宏。

宏定义

Emmet 支持宏定义，你可以自定义一些常用的代码片段，以便快速插入。

// 定义一个宏
:mytag {
  div > ul > li * 5 > span
}

// 使用宏
:mytag

代码片段

Emmet 支持多种代码片段，以下是一些常用的示例：

  • !：插入 HTML5 声明。
  • #：插入 ID 选择器。
  • .：插入类选择器。
  • >：插入子元素。
  • +：插入兄弟元素。
  • ^：插入父元素。
  • $：插入当前元素。

示例

以下是一个使用 Emmet 快速生成表格的示例：

table > tr * 3 > td * 2

这段代码会生成一个包含 3 行 2 列的表格。

扩展阅读

想了解更多关于 Emmet 的内容，可以访问 Emmet 官方网站。

Emmet 官方网站