webstorm
关于 webstorm 编辑器的相关记录
配置 Git
- 在 WebStorm 中配置 Github[01]
配置相关快捷键
自定义标签的自动补全
在 Angular 开发中,我们会引入其他模块,如果引入的模块存在自定义标签,我们希望使用该标签时能够获得提醒和补全代码。这时候,我们就需要对 WebStorm 进行配置。
以 Material 为例,我们希望在输入关键字后,能获取其中组件的自定义代码提示,并且使用 Tab
健能进行代码补全,如下【图一二】所示。
那么,在 WebStorm 中实现这个操作由以下两个步骤进行配置。
一、自定义标签提示
1 | <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-sidenav
和 mat-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
键就将整个组件结构输出到文件中了。