WebStorm教程,WebStorm基础教程,WebStorm高级教程,WebStorm核心教程,WebStorm破解教程,WebStorm注册码,WebStorm激活码,WebStorm破解,WebStorm破解插件,WebStorm注册码永久,WebStorm注册码2022,WebStorm注册码2021,WebStorm注册码失效,WebStorm注册码在线生成,WebStorm插件,WebStorm主题,Live templates,实时模版

展开实时模板:Tab

配置:Ctrl+Alt+S 设置/首选项 | 编辑 | 实时模板

使用实时模板将常见结构插入到您的代码中,例如循环、条件、各种声明或打印语句。

要展开代码片段,请输入相应的模板缩写并按Tab。按住以从模板中的一个变量Tab跳转到下一个变量。按移动到上一个变量。Shift+Tab

1.gif

实时模板的类型

区分以下类型的实时模板:

  • 简单模板只包含固定的纯文本。当您展开一个简单的模板时,文本会自动插入到您的源代码中,替换缩写。例如,flow插入@flow注解,vbase扩展为 Vue 单文件组件的存根,等等。

2.gif

  • 参数化模板包含启用用户输入的变量。当您展开参数化模板时,变量要么被输入字段替换以供用户手动指定,要么由 WebStorm 自动计算。例如,importitems展开为一个import语句,您可以在其中首先指定路径,然后将导入的成员作为参数。

3.gif

  • 环绕模板用用户指定的文本包装选定的代码块。例如,T展开成一对标签,您可以为其指定名称。您还可以选择一个代码块,然后按下Ctrl+Alt+J打开选择模板弹出窗口并选择T模板以使用一对标签包装选择。

JavaScript 后缀模板是实时模板,但会为现有代码创建构造。例如,您可以.if在表达式后键入以调用相应的后缀完成并用if语句包装表达式。

配置实时模板

要配置实时模板,请打开Editor | IDE 设置的Live TemplatesCtrl+Alt+S页面。在Live Templates页面上,您可以查看所有可用的实时模板、编辑它们并创建新模板。

为了使查找和编辑模板更容易,它们被分成组。要将模板移动到另一个组,请右键单击模板,选择移动,然后选择必要的组名。

如果您为实时模板设置了方言,则该实时模板将仅适用于该方言。

每个实时模板都由包含字母数字字符、点和连字符的缩写定义。缩写在一个组内必须是唯一的,但相同的缩写可以用于不同的组,并根据相应组的上下文扩展为不同的结构。修改后的默认模板的缩写以蓝色字体显示在列表中。

实时模版变量例子

让我们为 Angular 组件创建一个ngcomp模板,类似于默认的a-component. 模板将有 3 个变量:

  • 第一个,$ComponentName$,将成为新组件类名称的占位符。
  • 第二个,$selector$,将成为组件选择器的名称。
  • 第三个, ,表示在模板展开并填写$END$$ComponentName$ 和占位符后光标应该在末尾的位置。$selector$
  1. 在编辑器中,选择要在模板中使用的代码,按Ctrl+Shift+A,然后调用Save as Live Template...操作。

4.png

  1. 输入您将用于调用模板的缩写,例如ngcomp,并添加模板描述,例如New Angular 组件

5.png

  1. 将变量添加到模板中。

    • 替换SearchComponent$ComponentName$
    • selector: $selector$,里面加Component({})
    • 添加$END$ngOnInit(){}.

6.png

  1. 根据Angular Style Guide,选择器名称通常是组件名称的破折号版本,因此首先指定组件名称是有意义的。但是,选择器首先出现在代码中。

要解决此问题,请单击编辑变量并使用箭头图标调整变量的顺序。现在ComponentName先出现,插入符号将在模板扩展时首先跳转到它。

7.gif

  1. 如果我们可以只指定类名并通过类名转换自动填写选择器名,那就太好了。为此,请单击变量旁边的表达式字段,从列表中选择函数,然后键入作为其参数。selector`lowercaseAndDash`ComponentName

与模板主体不同,在“编辑模板变量”对话框中,使用变量的名称时无需打开和关闭美元字符$

8.gif

  1. 可选:

如果在旁边定义,您可以选择跳过selector。在这种情况下,编辑元件名称并按Enter后,光标将转到该$END$位置而不是$selector$

让我们看看我们的新模板的实际效果:

9.gif

标签: webstorm注册码, webstorm激活码, webstorm破解, webstorm破解教程, webstorm注册码2021, webstorm注册码失效, webstorm注册码永久, webstorm注册码2022, WebStorm, WebStorm教程, WebStorm基础教程, WebStorm入门教程, WebStorm高级教程, WebStorm核心教程, WebStorm破解插件, WebStorm注册码在线生成, WebStorm插件, WebStorm主题, Live templates, 实时模版

添加新评论