Help us understand the problem. What is going on with this article?

Angular をやるのに欠かせない VSCode Extension

More than 1 year has passed since last update.
  • 2017/07/11(Tue) 時点の情報に基づいています

Angular をやるのに Visual Studio Code (以降 VSCode) は相性ばっちりで、デフォルト設定でもほぼストレスなくプログラミングできるのが素晴らしいですが、以下の VSCode Extension をインストールすれば、さらに効率アップが図れます。

Angular Language Service

https://marketplace.visualstudio.com/items?itemName=Angular.ng-template

Angular 本家が開発している Extension で template に対してプロパティ補完をしてくれる強力な Extension です。存在しないプロパティを指定すればエラーチェックがかかって教えてくれます。

Path Intellisense

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

ファイルパスを補完してくれる Extension です。例えば Component の templateUrl や styleUrls に外部の HTML ファイルや CSS/SCSS ファイルのファイルパスを記述する際に ./ までタイプすればすぐに候補が表示され入力の手間が省けます。

この Extension 自体は Angular に限った話ではなく、<script src=""><link href="">, <img src=""> などファイルパスを入力する様々な個所で使用することができます。

Angular 2 TypeScript Emmet

https://marketplace.visualstudio.com/items?itemName=jakethashi.vscode-angular2-emmet

通常 Component でインライン template を記述する際 Emmet が効きません。この Extension を使えば template の中でも Emmet の恩恵を受けることができるようになります。

angular2-inline

https://marketplace.visualstudio.com/items?itemName=natewallace.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 コマンドが使えるようになります。これを探していた気がします。

caddi
製造業の受発注プラットフォーム「CADDi」を提供しています。 モノづくりに携わるすべての人が、本来持っている力を最大限に発揮できる社会を実現する。産業の常識を変える「新たな仕組み」をつくります。 「CADDi」は金属加工品のCAD・設計図の解析から複雑な物流を表現するUIまで幅広い開発をしており、常に開発環境に最新の技術をとり入れて、より良いプロダクトを作るように心がけております。
https://corp.caddi.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away