- 2017/07/11(Tue) 時点の情報に基づいています
Angular をやるのに Visual Studio Code (以降 VSCode) は相性ばっちりで、デフォルト設定でもほぼストレスなくプログラミングできるのが素晴らしいですが、以下の VSCode Extension をインストールすれば、さらに効率アップが図れます。
Angular Language Service
Angular 本家が開発している Extension で template に対してプロパティ補完をしてくれる強力な Extension です。存在しないプロパティを指定すればエラーチェックがかかって教えてくれます。
Path Intellisense
ファイルパスを補完してくれる Extension です。例えば Component の templateUrl や styleUrls に外部の HTML ファイルや CSS/SCSS ファイルのファイルパスを記述する際に ./ までタイプすればすぐに候補が表示され入力の手間が省けます。
この Extension 自体は Angular に限った話ではなく、<script src=""> や <link href="">, <img src=""> などファイルパスを入力する様々な個所で使用することができます。
Angular 2 TypeScript Emmet
通常 Component でインライン template を記述する際 Emmet が効きません。この Extension を使えば template の中でも Emmet の恩恵を受けることができるようになります。
angular2-inline
通常 Component でインライン template を記述した際、全て文字列のため HTML タグや CSS クラスのハイライトが行われません。この Extension をインストールすると、template 内を通常の HTML ファイルのようにハイライト表示させることができるようになります。
これらの VSCode Extension をインストールして快適な Angular ライフを！
他にも便利 Extension をご存知の方ぜひ教えてください！
追記
Angular入門者向けLT会 #4 で LT してきました。
全部入りが欲しい人は Angular Essentials を入れましょう。
2018-05-25追記
Angular Switch
https://marketplace.visualstudio.com/items?itemName=shinriyo.ionic-switch
.html <-> .ts をショートカットで切り替えてくれます。頻繁に切り替える方はぜひ。
@shinriyo@github さんの自作 Extension だそうです。ご紹介ありがとうございます。
https://qiita.com/shinriyo@github/items/e87888a3e99050e30f49
Angular Files
https://marketplace.visualstudio.com/items?itemName=alexiv.vscode-angular2-files
右クリックで Angular CLI の generate コマンドが使えるようになります。これを探していた気がします。