PyCharm 2025.3 Help

Emmet

Emmet 工具包可增强使用 HTML、CSS 和 JSX 的编码体验。 您可以在不离开 PyCharm 的情况下使用 Emmet 代码模板。 要将模板展开为正确的标记,请输入其 缩写 ,然后按 Tab。 要将 Tab 替换为其他键,请参阅 配置缩写展开键

例如,在 HTML 文件中,输入 table>tr*3>td*2 ,然后按 Tab ,即可得到一个 3 × 2 表格的基本框架:

<table> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table>

作为更复杂的示例,输入 table#myid>tr.row$*3>td*2 ,然后按 Tab ,即可得到相同的表格,但带有 id 属性,并为每个表格行设置自定义类:

<table id="myid"> <tr class="row1"> <td></td> <td></td> </tr> <tr class="row2"> <td></td> <td></td> </tr> <tr class="row3"> <td></td> <td></td> </tr> </table>

如需了解更多信息,请参阅 Emmet 速查表

PyCharm 支持用于编写 RGBA 颜色的新语法、隐式、默认和布尔属性、 更新标签 操作等功能。

启用并配置 Emmet

在 PyCharm 中,您可以使用原生 Emmet 模板,以及列在 编辑器 | 动态模板 设置页面&#xa0; Ctrl+Alt+S 上的 Zen CSSZen HTMLZen XSL 节点下的 200 多个额外的 HTML、CSS 和 XSL 实时模板。

  1. Ctrl+Alt+S 打开设置,然后选择 编辑器 | Emmet

  2. 在打开的 Emmet 页面 中,选择用于展开 Emmet 缩写的键,默认选择 Tab

  3. 要在特定语言(HTML、CSS 或 JSX)中启用或禁用 Emmet,请转到 编辑器 | Emmet | <Language> ,并切换 启用 <Language> Emmet 复选框。 使用 Emmet 页面上的控件,在不同的语言上下文中配置 Emmet。

PyCharm 允许您使用并自定义 Emmet 实时模板,或添加自定义模板。 假设您有一个模板 条目 ,其模板文本如下:

<entry type="$TYPES$">$END$ <entry>

要生成一个条目列表,您只需输入 “entry-list<entry[number=$]*5″ ,然后按 Tab。 默认情况下, number 属性会在 type 之前生成。 要自定义其生成的位置,您需要在模板中添加 ATTRS 变量,例如:

<entry type="$TYPES$" $ATTRS$>$END$ <entry>

ATTRS 变量必须具有空字符串作为默认值,并且应跳过。

将 Emmet 与实时模板配合使用

  1. Ctrl+Alt+S 打开设置,然后选择 编辑器 | 动态模板

  2. 在打开的 活动模板 页面中,展开 Zen HTMLZen CSSZen XSL 模板组,然后选中要使用的模板旁边的复选框。

  3. 当您在列表中选择一个模板时,焦点将移至 Template Text 区域,该区域中的字段显示所选模板的设置。

  4. 模板文本 字段中,将所需文本和变量添加到模板正文。

  5. 点击 编辑变量 按钮。 在打开的 Edit Template Variables 对话框中,在 默认值 字段中指定默认变量值,并在必要时选中 如果已定义则跳过 复选框。

配置缩写展开键

默认情况下,按 Tab 可展开原生 Emmet 缩写和额外的实时模板。 对于额外的实时模板,PyCharm 允许您重新定义默认展开键。 请注意,此自定义设置不会覆盖原生 Emmet 支持的默认设置;它只是让您能够使用这两个键中的任意一个来展开模板。

配置原生 Emmet 缩写的展开键

  1. Ctrl+Alt+S 打开设置,然后选择 编辑器 | Emmet

  2. 在打开的 Emmet 页面 中,从 使用以下按键展开缩写 列表中选择新的展开键,以替代默认的 Tab

配置 Emmet 实时模板的展开键

  1. Ctrl+Alt+S 打开设置,然后选择 编辑器 | 动态模板

  2. 在打开的 活动模板 页面中,展开 Zen HTMLZen CSSZen XSL 模板组,然后选择所需的模板。 焦点将移至 Template Text 区域。

  3. 展开方式 列表中,选择用于展开模板的键。

用 Emmet 模板环绕代码块

  1. 在编辑器中,选择要环绕的代码块,然后按 Ctrl+Alt+J ,或从主菜单中选择 代码 | 用……包围 | 动态模板

  2. 选择模板 列表中,选择 Emmet

    选择模板上下文菜单
  3. 输入要使用的 Emmet 缩写,然后按 Enter

    Emmet:输入缩写

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

    最近应用的 Emmet 实时模板历史记录

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

    您输入的缩写不存在,背景将变为红色

在编辑点之间导航

在 HTML 和 XML 中,您可以在 编辑点 之间导航,也就是在可应用 Emmet 模板的那些代码位置之间。

  • 要将插入符号移动到上一个编辑点,请选择 导航 | 上一个 Emmet 编辑点 ,或按 Alt+Shift+[

  • 要将插入符号移动到下一个编辑点,请选择 导航 | 下一个 Emmet 编辑点 ,或按 Alt+Shift+]

最后修改日期: 2025年 12月 2日