在WebStorm中为TypeScript自动导入类的快捷方式

Question

我正在观看Angular2的tutorial video和那个键入@Injectable()的人然后用一些黑魔法在顶部出现一条线

import {Injectable} from 'angular2/core'

他是怎么做到的，这是什么类型的巫术？

Answer 1

他（John Lindquist）使用 Alt + Enter （默认键盘映射中的快捷键 - 如果使用不同的键盘映射可能会有所不同）来启用“快速修复”菜单（也可以通过单击触发）在灯泡图标）。

显示菜单后，他使用该菜单中的“添加导入语句”条目（快速修复）。

RE：keymap - 您可以检查并为该菜单指定不同的快捷方式 - 只需使用Settings/Preferences | Keymap并查找Show Intention Actions操作（提示：使用搜索框快速缩小列表范围）。< / p>

Answer 2

这是 WebStorm 编辑器中最棒的快捷方式之一。

遵循以下步骤：

• 打开WebStorm代码编辑器。
• 选择
• 编辑
• 一般
• 自动导入
• Mark：show Import Pop up
• 标记：合并来自同一模块的符号的导入。

确定。

想象一下，您希望在表单中使用Validators。您输入的是Validators.required，然后它会显示红色的Validators字词，因为它需要导入到角度/表格中。
双击 ，然后按 选项+输入 。它会自动导入：

import {Validators} from "@angular/forms";

我也问你的原因 mark：来自同一模块的符号的合并导入：

想象一下，您已经从Validators导入了@angular/forms，现在您想要添加还需要从@angular/forms导入的FormGroup。现在发生的事情是它不会为它们分别添加另一个额外的导入行，而只是添加到可用的那个。

import { Validators , FormGroup } from "@angular/forms"