Emmet
Emmet 工具包增强了 HTML、CSS 和 JSX 的编码体验。 您可以在不离开 WebStorm 的情况下使用 Emmet 代码模板。 要将模板展开为正确的标记，请输入其 缩写 ，然后按 Tab。 要将 Tab 替换为其他按键，请参阅 配置缩写展开键。
例如，在 HTML 文件中，输入 table>tr*3>td*2 并按 Tab ，即可插入一个 3 × 2 的表格代码片段：
更复杂的示例中，输入 table#myid>tr.row$*3>td*2 并按 Tab 可生成相同的表格，但包含 id 属性，并为每一行添加自定义类：
如需详细信息，请参阅 Emmet Cheat Sheet。
WebStorm 支持例如 RGBA 颜色的新写法、省略、默认和布尔属性、“ Update Tag ”操作等功能。
启用并配置 Emmet
使用 WebStorm 您可以使用原生 Emmet 模板，以及列在 Zen CSS、 Zen HTML 和 Zen XSL 节点下的 200 多个额外 HTML、CSS 与 XSL 实时模板，这些设置位于 编辑器 | 活动模板 的设置页面上 Ctrl+Alt+S。
WebStorm 允许使用并自定义 Emmet 实时模板，也可以添加自定义模板。 假设您有一个模板 条目 ，其模板正文如下：
要生成条目列表，只需输入 “entry-list<entry[number=$]*5″ 并按 Tab。 默认情况下， number 属性会生成在 type 之前。 要自定义其生成位置，需在模板中添加 ATTRS 变量，例如：
ATTRS 变量必须以空字符串作为默认值，并应被跳过。
将实时模板与 Emmet 配合使用
按 Ctrl+Alt+S 打开设置，然后选择 。
在打开的 Live Templates 页面中，展开 Zen HTML、 Zen CSS 或 Zen XSL 模板分组，并选中所需模板旁的复选框。
在列表中选择模板后，焦点将移动到 模板文本区域，该区域显示所选模板的设置。
在 模板文本 字段中，将所需文本和变量添加到模板正文中。
单击 编辑变量 按钮。 在打开的 编辑模板变量 对话框中，在 默认值 字段中指定默认变量值，必要时选中 如果已定义则跳过 复选框。
配置缩写展开键
默认情况下，可通过按 Tab 展开原生 Emmet 缩写和附加模板。 对于附加模板，WebStorm 允许重新定义默认展开键。 请注意，该自定义设置不会覆盖原生 Emmet 支持的默认设置；您只是在这两个按键中获得展开模板的能力。
配置原生 Emmet 缩写的展开键
按 Ctrl+Alt+S 打开设置，然后选择 。
在打开的 Emmet 页面中，从 展开缩写为 列表中选择一个新的展开键，以替代默认的 Tab。
为 Emmet 实时模板配置展开键
按 Ctrl+Alt+S 打开设置，然后选择 。
在打开的 Live Templates 页面中，展开 Zen HTML、 Zen CSS 或 Zen XSL 模板分组并选择所需模板。 焦点将移动至 模板文本区域。
在 使用以下方式展开 列表中选择要用于展开模板的按键。
使用 Emmet 模板包裹代码块
在编辑器中，选择要包围的代码块并按 Ctrl+Alt+J ，或在主菜单中选择 。
从 列表中选择 Emmet：
键入要使用的 Emmet 缩写并按 Enter。
请注意右侧的列表。 单击向下箭头可查看最近应用的 Emmet 实时模板历史记录：
还需注意颜色指示。 如果输入有效的 Emmet 缩写，背景颜色为绿色。 但是，如果输入了不存在的缩写，背景颜色会变为红色：
在编辑点之间导航
在 HTML 和 XML 中，您可以在 编辑点 之间导航，即 Emmet 模板适用的代码位置之间。
要将插入符移至上一个编辑点，请选择 或按 Alt+Shift+[。
要将插入符移至下一个编辑点，请选择 或按 Alt+Shift+]。