关于 webstorm 编辑器的相关记录

配置 Git

  • 在 WebStorm 中配置 Github[01]

配置相关快捷键

自定义标签的自动补全

  在 Angular 开发中,我们会引入其他模块,如果引入的模块存在自定义标签,我们希望使用该标签时能够获得提醒和补全代码。这时候,我们就需要对 WebStorm 进行配置。
  以 Material 为例,我们希望在输入关键字后,能获取其中组件的自定义代码提示,并且使用 Tab 健能进行代码补全,如下【图一二】所示。

图一二

那么,在 WebStorm 中实现这个操作由以下两个步骤进行配置。

一、自定义标签提示

[代码块一]:MatSidenavModule 模块的部分自定义标签
1
2
3
4
<mat-sidenav-container>
<mat-sidenav></mat-sidenav>
<mat-sidenav-content></mat-sidenav-content>
</mat-sidenav-container>

  WebStorm 初始时已经配置了 HTML 标签,我们在键入 <si 时候,可以看到 WebStorm 显示出包含 si 字符的 HTML 标签,如【图一】所示。

图一

  现在的目标是将 mat-sidenav-container 标签也添加到自动补全中,输入【代码块一】所示代码块,将鼠标焦点置于 <mat-sidenav-container> 标签中,可以看到出现了一个灯泡图标和一段提示说明,如【图二】所示。按照提示使用组合键 ⌥⇧⏎ ,会直接将焦点所在的自定义标签添加到自动提示中,当我们再次键入<si时,可以看到会出现相应提示,效果如【图三】所示。

图二
图三

  上述的方法只是适合添加单个标签,如果需要添加大量自定义标签或暂未使用的自定义标签,则需要如下操作,将鼠标焦点置于 <mat-sidenav></mat-sidenav> 标签中,点击灯泡图标或者使用另外的组合键 ⌥⏎ ,可以看到三个选项,点击首个选项的小箭头,会出现如【图四】所示界面,此时选择” Edit inspection profile setting “,进入到【图五】界面。

图四

  【图五】界面中,我们看到之前添加的 mat-sidenav-container 标签,这说明开始通过快捷键添加的自定义标签也是添加到这个位置的。
图五

  点击扩大符号,可以看到如【图六】的文本框,当我们输入mat-sidenavmat-sidenav-content 并点击确定后,则上述三个标签均能获得提示了。此时我们清除原有代码块,键入 <si ,可以看到【图七】所示中,三个标签均已经有相关提示及可以按 Tab 健进行补全了。

图六
图七

二、代码的补全

  【代码块一】中我们可以看到,一个组件的几个自定义标签都具有相应结构,上面介绍的自定义标签单个补全不足以反应这种结构。我们期望键入 mat-side 等关键字就可以将整个代码块补全。此时,则需要另一种方式。
  首先调出 WebStorm 的 Preferences,如【图八】所示,找到 Live Templates

图八

  点击 Template Group,创建出 Material Template 组后,选中创建出来的组,如【图九】所示点击 Live Template

图九

  【图一零】所示填写关键字、相关描述和模板内容后,点击 Define 去选择规则作用的上下文,因为我们这个规则是应用在 HTML 文件中的,所以我们就选取 HTML 的选项,如【图一一】所示。

图一零
图一一

  此时,我们在 HTML 中键入 <mat-,选择 <mat-sidenav-container> 后,再按 Tab 键就将整个组件结构输出到文件中了。

图一二

参考引用