Emmet
Emmet 工具包可增强使用 HTML、CSS 和 JSX 的编码体验。 您可以在不离开 PyCharm 的情况下使用 Emmet 代码模板。 要将模板展开为正确的标记,请输入其 缩写 ,然后按 Tab。 要将 Tab 替换为其他键,请参阅 配置缩写展开键。
例如,在 HTML 文件中,输入 table>tr*3>td*2 ,然后按 Tab ,即可得到一个 3 × 2 表格的基本框架:
作为更复杂的示例,输入 table#myid>tr.row$*3>td*2 ,然后按 Tab ,即可得到相同的表格,但带有 id 属性,并为每个表格行设置自定义类:
如需了解更多信息,请参阅 Emmet 速查表。
PyCharm 支持用于编写 RGBA 颜色的新语法、隐式、默认和布尔属性、 更新标签 操作等功能。
启用并配置 Emmet
在 PyCharm 中,您可以使用原生 Emmet 模板,以及列在 编辑器 | 动态模板 设置页面  Ctrl+Alt+S 上的 Zen CSS、 Zen HTML 和 Zen XSL 节点下的 200 多个额外的 HTML、CSS 和 XSL 实时模板。
PyCharm 允许您使用并自定义 Emmet 实时模板,或添加自定义模板。 假设您有一个模板 条目 ,其模板文本如下:
要生成一个条目列表,您只需输入 “entry-list<entry[number=$]*5″ ,然后按 Tab。 默认情况下, number 属性会在 type 之前生成。 要自定义其生成的位置,您需要在模板中添加 ATTRS 变量,例如:
ATTRS 变量必须具有空字符串作为默认值,并且应跳过。
将 Emmet 与实时模板配合使用
按 Ctrl+Alt+S 打开设置,然后选择 。
在打开的 活动模板 页面中,展开 Zen HTML、 Zen CSS 或 Zen XSL 模板组,然后选中要使用的模板旁边的复选框。
当您在列表中选择一个模板时,焦点将移至 Template Text 区域,该区域中的字段显示所选模板的设置。
在 模板文本 字段中,将所需文本和变量添加到模板正文。
点击 编辑变量 按钮。 在打开的 Edit Template Variables 对话框中,在 默认值 字段中指定默认变量值,并在必要时选中 如果已定义则跳过 复选框。
配置缩写展开键
默认情况下,按 Tab 可展开原生 Emmet 缩写和额外的实时模板。 对于额外的实时模板,PyCharm 允许您重新定义默认展开键。 请注意,此自定义设置不会覆盖原生 Emmet 支持的默认设置;它只是让您能够使用这两个键中的任意一个来展开模板。
配置原生 Emmet 缩写的展开键
按 Ctrl+Alt+S 打开设置,然后选择 。
在打开的 Emmet 页面 中,从 使用以下按键展开缩写 列表中选择新的展开键,以替代默认的 Tab。
配置 Emmet 实时模板的展开键
按 Ctrl+Alt+S 打开设置,然后选择 。
在打开的 活动模板 页面中,展开 Zen HTML、 Zen CSS 或 Zen XSL 模板组,然后选择所需的模板。 焦点将移至 Template Text 区域。
从 展开方式 列表中,选择用于展开模板的键。
用 Emmet 模板环绕代码块
在编辑器中,选择要环绕的代码块,然后按 Ctrl+Alt+J ,或从主菜单中选择 。
从 列表中,选择 Emmet:

输入要使用的 Emmet 缩写,然后按 Enter。

请注意右侧的列表。 点击向下箭头以查看最近应用的 Emmet 实时模板历史记录:

另请注意颜色指示。 如果您输入有效的 Emmet 缩写,背景为绿色。 但是,如果您输入不存在的缩写,背景将变为红色:

在编辑点之间导航
在 HTML 和 XML 中,您可以在 编辑点 之间导航,也就是在可应用 Emmet 模板的那些代码位置之间。
要将插入符号移动到上一个编辑点,请选择 ,或按 Alt+Shift+[。
要将插入符号移动到下一个编辑点,请选择 ,或按 Alt+Shift+]。