VSCode で Angular 開発する際に入れておくと良い拡張機能

Angular4 系の開発をする時に VSCode に入れておくと良さげな拡張機能たちを紹介する。

Angular v4 TypeScript Snippets

SPA や Angular の界隈で有名な John Papa さんがメンテナンスしている。Angular のスニペットを一瞬で吐いてくれるのだが、a- 始まりで出てくるようになっているので、普段誤ってスニペットが吐かれたりしなくて良い。

Beautify

JSON なんかを良き感じに整形したりとかに使っている。.jsbeautifyrc は置いていない。

Code Spell Checker

英語がダメな人はコレを入れてスペルチェック。

EditorConfig for VS Code

プロジェクトディレクトリにある .editorconfig の設定に従って、保存時に自動整形してくれる。自分が指定している内容は Angulra CLI が自動生成してくれるヤツそのまんまでシンプル。

Git History (git log)

Git 管理しているソースの差分がエディタの行番号のところに出たりするので分かりやすい。

Path Intellisense

import とかで相対パスを打っているときに自動補完してくれる。../ まで打つとそのファイルを起点とした相対パスで周辺のファイルを候補に出してくれたりして良い。

Protractor Snippets

Angular アプリで E2E テストとなると Protractor 一択。ということで Protractor 向けのスニペットを吐いてくれるヤーツ。

TSLint

プロジェクトディレクトリにある tslint.json を見てエディタ上に警告やエラーを出してくれる。TSLintFixer が用意されているルールであれば、保存時に自動修正もしてくれる。import の並び順とかを自動で揃えてくれるのは嬉しい。

tslint.configFile というオプションを指定すれば、エディタ上で使う tslint.json を別のファイルに切り替えられるようなので、必要であればこちらも試したい。

TypeScript Importer

プロジェクトディレクトリ配下で定義ファイルを特定できる型であれば、それっぽいクラス名とかを途中まで打つとそのクラスを候補に表示してくれて、それを選択すると import 文を自動で挿入してくれる。

Java 上がりだとこのあたりの機能って Eclipse が全部標準装備していたけど、発展途上の言語だとなかなか完璧パーペキな IDE 環境ができない。import とかももっと楽になるといいんだけどな〜。