WebStorm和Angular的12个最佳生产力提示：第2部分

关于WebStorm和Angular的这篇文章由JetBrains赞助。 感谢您支持使SitePoint成为可能的合作伙伴。

在关于WebStorm和Angular的这个由两部分组成的系列文章中，Google开发人员专家Jurgen Van de Moere和Todd Motto分享了他们使用WebStorm开发Angular应用程序时最喜欢的12个生产力提示。

您可以在这里查看第一部分。 在第二部分中，Todd分享了他个人的七个WebStorm功能，这些功能使他每天都可以提高WebStorm和Angular的生产力：

• 使用导入路径计算
• 实时模板
• 在IDE中运行测试
• 穿越时空
• 使用TypeScript参数提示
• 使用面包屑导航
• 并使用WebStorm查找Angular文档

在WebStorm中开发Angular应用程序时，每个WebStorm和Angular技巧都会提高您的生产力。 让我们探索这些技巧。

开始之前：更改设置时，请记住，WebStorm允许您分别在IDE范围和项目范围更改设置/首选项。

WebStorm和Angular技巧6：导入路径计算

默认情况下，WebStorm将解析您相对于文件的导入路径。 此设置将满足大多数项目的需要，并避免不必要的路径编辑。 这也是用于Angular CLI生成的项目的方法。

WebStorm的奇妙之处在于您不必自己输入这些导入语句！ 当您需要使用通常会导入的结构时，只需在需要的位置键入它即可。 WebStorm会建议通过“自动完成”上下文菜单导入的结构，或者突出显示该结构并通过按Option + Enter来选择导入。

WebStorm将在文档顶部为您创建一个新的import语句，或将构造添加到使用相同源库的现有导入组中。

WebStorm为您提供其他专用选项来处理导入。 对于需要它的项目，您可以指示WebStorm计算相对于tsconfig.json文件位置的导入路径。 如果您决定使用barrel index.ts文件来index.ts内容以导入组件（了解有关Barrel技术的更多信息），则可以使用use directory import（节点样式的模块解析度） 。 这将使用Node.js模块解析策略，而不是TypeScript的经典模块解析策略。

当导入不需要导入整个模块的子模块时，将该模块添加到“不完全从...导入”列表中。 WebStorm将在自动导入期间跳过指定的路径。 例如，与其具有：

import {Observable} from 'rxjs'

…将rxjs添加到列表中将产生：

import {Observable} from 'rxjs/Observable'

WebStorm跳过RxJS模块并自动为您导入Observable子模块！

额外提示：在“首选项”>“编辑器”>“代码样式”>“ TypeScript”中，输入格式以使用大括号内的空格–空格–内– ES6导入/导出括号 。

WebStorm和Angular技巧7：使用实时模板

当您发现自己反复编写某些代码模式时，请创建一个实时模板以快速搭建代码块。 WebStorm已经带有一些预定义的实时模板，您可以对其进行修改以适合您的开发风格。

要创建实时模板，请导航至以下位置：

• [macOS] WebStorm>首选项>编辑器>实时模板
• [Windows / Linux] 文件>设置>编辑器>动态模板

您将看到WebStorm已将预定义的模板捆绑到类别中。 通过单击+号并选择“ 模板组”，我创建了一个类别来捆绑我的ngrx Live模板。 然后，我通过再次单击+符号在其中创建了一个新的实时模板，但是这次选择了实时模板。

让我向您简要介绍使Live Template成为成功的要素：

• 缩写：您将在编辑器中键入的快捷方式以调用模板。
• 说明：告诉您模板被调用时的功能。
• 模板文本：这是调用时将要构架的代码片段。 利用功能强大的实时模板变量，该变量可让您在脚手架上用所需的文本替换它们。
• 上下文：选择WebStorm对模板敏感的语言或代码段。
• 选项：根据WebStorm>首选项>编辑器>代码样式上定义的样式设置，定义允许您扩展和重新格式化模板的键。

您已准备好尝试使用模板。 打开一个符合您定义的上下文的文件，然后键入快捷方式，按定义的扩展键，然后为您显示模板！ 如果定义了任何变量，则光标将放置在应输入第一个变量的位置。 如果定义了其他变量，则可以使用tab导航到它们-无需单击。

WebStorm和Angular技巧8：运行测试

WebStorm是出色的测试工具。 只要您在计算机上安装了Node.js运行时环境并启用了NodeJS插件，就可以直接从IDE运行各种JavaScript测试。 这是运行测试时的一些生产率提示。

您可以运行单个Karma测试，而不是全部运行它们。 在编辑器中单击测试旁边的图标，然后选择“运行”或“ 调试” 。 该图标将显示测试状态。

直接在IDE中使用Protractor运行和调试测试。 确保全局安装了量角器。 测试结果将显示在工具窗口中。 您可以过滤测试结果，并选择仅显示失败的测试。

另外，您可以直接从IDE测试RESTful服务！ 转到工具>测试RESTful Web服务 。

WebStorm和Angular技巧9：穿越时空

这是WebStorm可以节省一天的地方。 您可能已经不停地编写了许多新行，而忘记了定期将代码提交到版本控制中或完全将其初始化。 它发生了。 无论哪种情况，在某些情况下我们都需要时光倒流。

我们可以使用“撤消”，但是WebStorm的默认限制为100次撤消。 可以增加此限制，但是有一种更好的方法可以还原以前的状态：使用本地历史记录。

使用本地历史记录，您可以浏览代码快照以直观地找到要访问的代码库状态。 它类似于版本控制，将当前状态与先前状态并排比较。 （也可以使用Unified Viewer。）但是，本地历史记录独立于版本控制：例如，即使您尚未启动git，也可以使用它。 快照将易于浏览，因为它们按时间排序-从最新到最旧。

WebStorm和Angular技巧10：TypeScript参数提示

TypeScript参数提示显示方法和函数中参数的名称，以使您的代码更易于阅读。 默认情况下，仅根据某些参数提示的类型显示它们，而隐藏一些通用方法的提示。

为避免分心，您可以将参数提示列入黑名单，以便在项目中不再为该方法显示它们。 您还可以启用所有参数或完全禁用它们。 要显示所有参数的参数提示：

• 在WebStorm>首选项>编辑器>常规>外观中打开外观页面。
• 单击“显示参数名称提示”复选框旁边的“ 配置 ”。
• 在“ 选项”框中，可以选择“显示所有参数的名称”。*

*注意：在同一对话框中，您可以修改参数提示黑名单。

WebStorm和Angular技巧11：使用面包屑导航

查看.ts文件的底部，您可以使用面包屑查看当前文件中的位置。 面包屑显示类，变量，函数和方法的名称。 单击面包屑的名称以跳到父对象。 您可以通过右键单击面包屑，然后单击“ 面包屑”>“顶部”或“ 面包屑”>“不显示” ，将它们配置为显示在编辑器的顶部，或根本不显示 。

或者，您可以使用“文件结构”弹出窗口浏览文件。 可以通过导航>文件结构或在macOS上按CMD + F12 ，在Windows / Linux上按Ctrl + F12来访问它。

WebStorm和Angular Extra Tip 12：查找文档

无需离开IDE即可获得有关Angular正在做什么的更深入的信息。

只要WebStorm拥有有关Angular构造的文档，您就可以将插入符号放在Angular方法或函数上，然后按F1键快速查看其文档。 这也适用于模块和其他Angular构造。

调用文档的另一种快速方法是将鼠标放在结构上。 在“首选项”>“编辑器”>“常规”中 ，选中“在鼠标移动时显示快速文档”框。 您可以在调用快速文档之前调整时间延迟。

最后一句话：不要仅仅遵循这些提示！ 衡量结果。 WebStorm允许您在“ 帮助”>“生产率指南 ”中获取生产率报告。 您会看到键入代码完成为您节省了多少！

摘要

让我们回顾一下Todd在WebStorm中提高Angular开发生产力的个人技巧：

• 使用有效的导入技术
• 使用实时模板快速构建代码模式
• 在IDE中运行和监视各种测试
• 使用本地历史记录作为独立的个人实时版本控制系统
• 通过使用TypeScript参数提示来提高代码的可读性
• 使用面包屑或文件结构工具快速导航到文件
• 直接从编辑器中查找Angular文档。

到此，我们结束了由Google Developer Experts使用WebStorm开发Angular应用程序的WebStorm和Angular生产力提示。 现在，您可以简化开发工作流程并充分利用键盘上的时间。

From: https://www.sitepoint.com/productivity-tips-for-webstorm-and-angular-part-2/