WebStorm 2021.1 Help

语言注入

语言注入让您可以使用不同于文件主要语言的编程语言处理代码片段。

WebStorm 为编辑 HTML、CSS、XML、JSON、RegExp 和字符串和模板文字内的其他代码片段以及类似 XML 语言的标签和属性内的代码片段提供了全面的语言帮助。

在你开始前

确保在Settings/Preferences |的Installed选项卡中启用了IntelliLang捆绑插件。插件页面,如管理插件中所述。

临时注入一种语言

默认情况下,IDE 会临时注入一种语言。这意味着如果您删除嵌入的元素,注入也会丢失。

  1. 将插入符号放在要在其中注入语言的字符串或模板文字、标记或属性中,然后按Alt+Enter(或使用意图操作图标意图操作图标)。

  2. 选择注入语言或参考,然后选择要注入的语言。

    注入 HTML

打开注入编辑器

  1. 将插入符号放置在注入的代码片段中并按下Alt+Enter(或使用意图操作图标意图操作图标)。

  2. 选择编辑 <语言 ID> 片段

    WebStorm 将打开一个专门的编辑器部分,用于使用注入的语言编辑代码。此编辑器提供完整的代码帮助,包括代码完成、检查、意图和代码样式操作。

    在专用编辑器中编辑 HTML 片段

使用语言注入注释

  • 当您注入一种语言时,WebStorm 建议添加注释。按Alt+Enter接受建议。

    自动添加语言注释
  • 您还可以在目标字符串文字前添加一个空行,然后键入以下注释:

    语言=<语言 ID>

    对于注释,请使用您要注入的语言的语法。语言 ID 通常是直观的,例如 SQL、RegExp、XML、HTML。

一个语言片段可以与一个前缀和一个后缀组合在一起,作为一个包装器,将片段变成一个语法上完整的语言单元。编辑代码时,您只能在片段编辑器中看到前缀和后缀。它们不会显示在主编辑器中。

前缀和后缀可以包含在注入注释中,如下所示:

// 语言=<语言 ID> 前缀=<前缀> 后缀=<后缀>
在语言注入中使用前缀和后缀

取消注射

  • 将插入符号放在代码片段上,按Alt+Enter,然后从列表中选择取消注入语言或引用

    取消语言注入
  • 或者,只需删除注入注释。

配置自动注入规则

在 WebStorm 中,有一组预定义的规则,IDE 根据这些规则自动在代码中的某些位置注入语言。

您可以在编辑器上配置语言注入规则| IDE 设置的语言注入Ctrl+Alt+S页面。

语言注入设置

所有预定义的注入规则都是为内置范围配置的。换句话说,它们是全局的(因此在所有 WebStorm 项目中都可用)。可以为 IDE 或仅为一个项目配置自定义规则。要更改自定义注入的范围,请使用移至项目/IDE 范围按钮.

要通过 VCS 共享自定义规则,请使用工具栏上的相应选项将其移动到项目范围。通过这样做,您将在名为IntelliLang.xml的.idea目录中创建一个新文件,其中包含您可以置于版本控制之下的自定义规则。

如果您不使用 VCS,您可以通过将规则导出到 XML 文件(单击出口工具栏上的 )然后将它们导入到另一个项目来共享您的规则。

要配置自定义注入规则,请单击添加按钮以添加新规则,或复制预定义规则并更改其设置。

为语言注入配置背景

对于 JavaScript、TypeScript、HTML、XML 和 Pug 注入,您可以使用自定义颜色作为背景。

  1. 打开设置/首选项对话框 ( Ctrl+Alt+S),转到编辑器 | 配色方案,然后选择您要为其自定义注入背景颜色的语言。

  2. 从中央窗格的列表中,选择Injected language fragment,然后选择右侧窗格中的背景复选框。

    如果所选语言从另一种语言继承背景颜色,则背景字段将被禁用。要覆盖继承的设置,首先清除Inherit values from复选框。

    单击背景复选框旁边的字段,然后在打开的选择颜色对话框中选择一种颜色。

为语言注入配置自定义背景
最后修改:2022 年 1 月 24 日