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 コマンドが使えるようになります。これを探していた気がします。

Why do not you register as a user and use Qiita more conveniently?
  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
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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