Fork me on GitHub
tc9011's

WebStorm中的AngularJS2模板插件使用

2017020346412banner2.png

Angular官方文档的风格指南提到使用IDE的模板来实现统一的风格,里面的IDE没有提到WebStorm,于是网上搜了一下相关资料。

安装插件

参照WebStorm 最新 2016 AngularJs 2 代码提示插件安装

在webstorm的setting或者performance(macos)中选择左侧Plugin选项,然后点击Browse repositories。

20170203444972017-02-03_19-32-37.png

在搜索框中搜索Angular 2 TypeScript Live Templates,然后点击Install,会提示重启webstorm,重启后就安装好了。

20170203245412017-02-03_19-35-00.png

如果电脑上设置了代理,点击左下角的HTTP proxy settings,选择auto-detect proxy settings,然后再进行下载。

20170203747432017-02-03_19-39-06.png

使用插件

Angular 2 TypeScript Live Templates (Snippets) for WebStorm的github上有使用说明,我按照这个说明演示一下。

TypeScript Snippets

插件对于TypeScript有以下指令:

1
2
3
4
5
6
7
8
ng2-component-root // Angular 2 root App component
ng2-bootstrap // Angular 2 bootstraping, for main.ts
ng2-component // Angular 2 component
ng2-pipe // Angular 2 pipe
ng2-routes // Angular 2 @Routes
ng2-route-path // Angular 2 routing path
ng2-service // Angular 2 service
ng2-subscribe // Angular 2 observable subscription

指令会有提示,选择相应的指令会生成预设的模板。

20170203551372017-02-03 20_21_43.gif

HTML Snippets

插件对Angular中的以下指令也有提示:

1
2
3
4
5
6
7
ng2-ngClass
ng2-ngFor
ng2-ngIf
ng2-ngModel
ng2-routerLink
ng2-ngStyle
ng2-ngSwitch

20170203217632017-02-03_20-40-07.gif

汤诚 wechat
欢迎订阅我的微信公众号
坚持原创技术分享,您的支持将鼓励我继续创作!
------ 本文结束 ------

版权声明

tc9011's Notes by Cheng Tang is licensed under a Creative Commons BY-NC-ND 4.0 International License.
汤诚创作并维护的tc9011's Notes博客采用创作共用保留署名-非商业-禁止演绎4.0国际许可证
本文首发于tc9011's Notes 博客( http://tc9011.com ),版权所有,侵权必究。