Angular2 Component Generation の使い方

概要

Visual Studio Code の拡張機能、「Angular2 Component Generation」の使い方
のメモを残しておきます。

前提（ 2017/4/21時点 ）

• VSCode ver.1.11.2
• Angular2 Component Generation ver.0.0.2
• VSCodeにAngular2 Component Generationがインストール済であること

簡単な説明

この拡張機能はコンポーネントを作成するのに必要なフォルダ、ファイルを規約に乗っ取り雛形を作成してくれるものである。

例）
作成したいコンポーネント「test」

src
　app
　　test                      (作成）
　　　test.componennto.ts　　（作成）
　　　test.module.ts　　　　　（作成）
　　　test.component.html　　（作成）
　　　test.component.css　　　（作成）

test.component.ts

import { Component } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'test',
    templateUrl: 'test.component.html',
    styleUrls: ['test.component.css']
})
export class TestComponent {}

test.module.ts

// Angular Imports
import { NgModule } from '@angular/core';

// This Module's Components
import { TestComponent } from './test.component';

@NgModule({
    imports: [ ],
    declarations: [ TestComponent ],
    exports: [ TestComponent ]
})
export class TestModule {}

※test.component.html、test.component.css はコメントのみで空ファイルで作成される

これだけでも便利だがカスタマイズ方法も残しておく。

カスタマイズ設定

VSCode の ユーザー設定に以下を追加する。

setting.json

// Place your settings in this file to overwrite the default settings
{

  ～

  "ng2ComponentGenerator.config": {
    "global": {
      "quotes": "single",     // or "double",
      "generateFolder": true  // or false
    },
    "files": {
      "component": {
      "create": true,
      "extension": "ts",
      "template": "${workspaceRoot}/templates/component.template"
    },
    "css": {
      "create": true,
      "extension": "css",
      "template": "${workspaceRoot}/templates/css.template"
    },
    "html": {
      "create": true,
      "extension": "html",
      "template": "${workspaceRoot}/templates/html.template"
    },
    "module": {
      "create": true,
      "extension": "ts",
      "template": "${workspaceRoot}/templates/module.template"
    }
  }
}

各ファイル毎にひな型を指定することが可能
各設定値の説明は以下のサイトを参照

Angular2 Component Generation サイト

テンプレートファイルの例

${workspaceRoot}/templates/component.template

import { Component } from {quotes}@angular/core{quotes};

@Component({
    moduleId: module.id,
    selector: {quotes}my-app-{selector}{quotes},
    templateUrl: {quotes}{templateUrl}{quotes},
    styleUrls: [{quotes}{styleUrls}{quotes}]
})
export class {className}Component {
    constructor() {
        console.log("{className}Component constructor in");
    }
}

${workspaceRoot}/templates/module.template

// Angular Imports
import { NgModule } from {quotes}@angular/core{quotes};

// This Module's Modules
import { {className}RoutingModule } from {quotes}./{componentName}-routing.module{quotes};

// This Module's Components
import { {className}Component } from {quotes}./{componentName}.component{quotes};

@NgModule({
    imports: [ {className}RoutingModule ],
    declarations: [ {className}Component ],
    exports: [ {className}Component ]
})
export class {className}Module {
    constructor() {
        console.log("{className}Module constructor in");
    }
}

この例では Module として RouingModule を作成することを想定したひな型となっている。
RoutingModuleは作成してくれないので自分で作成する必要はありますが
まあこれでも大分手間は省けるはずです。

以上です。