首页 > web前端 > js教程 > Webstorm和Angular的前12个生产力技巧:第2部分

Webstorm和Angular的前12个生产力技巧:第2部分

Joseph Gordon-Levitt
发布: 2025-02-15 11:49:13
原创
254 人浏览过

>本文探讨了分为两部分的角度开发人员的十二个增强生产力的Webstorm特征。 这是第二部分,重点关注Google开发人员专家Jurgen van de Moere和Todd Motto共享的七个关键功能。 (第一部分可用[链接到第一部分(如果有)])。

>

Top 12 Productivity Tips for WebStorm and Angular: Part 2

钥匙要点:

  • 简化导入:利用WebStorm的自动导入语句生成的导入路径计算,最小化错误并节省了时间。 自定义导入设置(例如,tsconfig.json路径,桶文件,不包括特定模块)以适合项目需求。
  • 快速代码脚手架:>利用实时模板创建可重复使用的代码段,加速开发并减少重复编码。>
  • 集成测试:>直接在WebStorm中运行各种JavaScript测试(Karma,量角器),简化了测试过程。
  • >增强代码可读性:
  • 使用打字稿参数提示,快速导航的面包屑以及通过WebStorm直接访问Angular文档的代码理解。
> Webstorm和Angular Tip 6:轻松的导入管理

> > WebStorm智能地管理导入路径,通常将它们相对于文件(Angular CLI默认值)解决。 只需使用构造,而不是手动键入导入; WebStorm建议通过自动填充导入它,或者将其用于选项Enter(或Windows/Linux上的ALT ENTER)导入它。 它要么将新的导入语句添加或从同一库中添加到现有的语句中。>

高级导入选项允许相对于Import Path Calculation GIF>的路径计算或使用node.js模块分辨率(非常适合桶文件)。您还可以指定用于从自动导入中排除的模块。

>

tsconfig.json webstorm和Angular Tip 7:效率的实时模板 用实时模板轻松解决重复的代码模式。 WebStorm提供预定义的模板,您可以自定义或创建新模板。 导航到

preperences/settings>编辑>实时模板

管理它们。

>定义缩写,描述,模板文本(使用变量),上下文和扩展/重新格式化选项。 通过键入缩写并按下定义的膨胀键来调用模板。>

Top 12 Productivity Tips for WebStorm and Angular: Part 2

> webstorm和Angular Tip 8:In-In In-Ins Testing

>

>直接从WebStorm运行各种JavaScript测试(假设Node.js和NodeJS插件已安装)。 直接从编辑器中运行单个业力测试,或在专用窗口中显示的结果调试量角测试。 还通过> Tools&gt集成了RESTFUL服务测试。测试RESTFUL WEB服务

Running Karma Tests GIF Testing RESTful Services GIF

> webstorm和Angular提示9:代码修复的本地历史 > WebStorm的本地历史记录提供了代码的快照,使您可以独立于版本控件恢复到以前的状态。 访问它以比较当前版本和过去的版本,即使没有git初始化。

>

Top 12 Productivity Tips for WebStorm and Angular: Part 2 Top 12 Productivity Tips for WebStorm and Angular: Part 2

> webstorm和Angular Tip 10:打字稿参数提示clarity

> 打字稿参数提示通过在函数中显示参数名称来提高代码可读性。自定义提示可见性中的可见性/preverences/settings>编辑>一般>外观

。 您可以显示所有参数的提示,为特定方法创建黑名单,也可以完全禁用它们。

>

Top 12 Productivity Tips for WebStorm and Angular: Part 2 Top 12 Productivity Tips for WebStorm and Angular: Part 2 Parameter Hints GIF webstorm和Angular Tip 11:面包屑,用于有效导航

编辑器底部(或可配置为顶部)的面包屑在文件中显示您的当前位置。单击面包屑跳到父对象。另外,请使用文件结构弹出窗口(导航>文件结构或cmd/ctrl f12)。

Top 12 Productivity Tips for WebStorm and Angular: Part 2 > webstorm和Angular Tip 12:访问角文档In-ide Breadcrumbs GIF

>

直接在WebStorm中访问角文档。将Caret放在角构建体上,然后按F1,或在对于即时悬停文档。

Angular Documentation GIF Top 12 Productivity Tips for WebStorm and Angular: Part 2 Hover Documentation GIF

结论:

掌握这些WebStorm功能,以显着增强您的角度开发工作流程。 请记住使用WebStorm的生产力报告(

帮助>生产力指南)。

(为简洁而省略了常见问题部分,因为这是有关IDE功能的标准问题和答案。

以上是Webstorm和Angular的前12个生产力技巧:第2部分的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板