albatrosary's blog

UI/UXとエンタープライズシステム

Angular を書くには Johnpapa さんのスニペット使おう

Angular でアプリケーションを作るには angular-cli の利用が欠かせませんが、Visual Studio Code用のスニペットもありますので利用しましょう。Angular やっていて Johnpapa さんを知らない人はいないというくらい有名な方です。

github.com

注意)ちょっと古いよ!

スニペットのインストール

cmd + shift + p キーを実行し「Install Extensions」を入力し選ぶと検索画面が出てきますので「Angular 2 Typescript Snippets」を選びインストールします。これで終わり。

使ってみる

幾つかスニペットがありますが「ng2-com」を打ち tab キーを叩くとテンプレートが出力されます

f:id:albatrosary:20161222204703p:plain

f:id:albatrosary:20161222204722p:plain

f:id:albatrosary:20161222204738p:plain

イカしてるね。

これ以外に

TypeScript Snippets

ng2-bootstrap       // Angular 2 bootstrapping, for main.ts
ng2-component       // Angular 2 component
ng2-component-root  // Angular 2 root app component
ng2-http-get        // Angular 2 http.get with Rx Observable
ng2-module          // Angular 2 module
ng2-module-root     // Angular 2 root app module
ng2-pipe            // Angular 2 pipe
ng2-routing         // Angular 2 routing
ng2-service         // Angular 2 service
ng2-subscribe       // Angular 2 Rx Observable subscription

HTML Snippets

ng2-ngClass
ng2-ngFor
ng2-ngIf
ng2-ngModel
ng2-routerLink
ng2-ngStyle
ng2-ngSwitch

ってあるから使ってみて下さい。