普段Angular開発(TypeScript)をしている時に、JetBrains IDEにあるようなImport文の自動追加機能が、Visual Studio Codeで使えたらいいな〜、と思っていたところ、「Auto Import」という拡張機能を見つけました。使ってみたところ、かなりいい感じでした。
＊注意事項： 「Auto Import」は、TypescriptとTSXで動作する拡張機能です。
インストール方法
VS Codeを開いて、サイドメニューの一番下の拡張機能アイコンを押し、左上の検索バーに「Auto Import」と入力して探します。
上記の画面にある「インストール」ボタンを押して、インストール完了後に「再読み込み」(ウィンドウの再読み込み)をします。
使ってみる
さっそく使ってみましょう。普段はAngular Essentialsも入れているのですが、今回はAuto Importの検証のため、Auto Import以外の拡張機能は無効にしています。
Angular CLIで$ ng new try-auto-importをして、プロジェクトの雛型が生成されたところからスタート。
事前に自作ディレクティブも作成しておきました。
$ ng g directive hoge
試す
app.components.tsなどで試してみました。
試してみて
HttpModuleなど一部のモジュールがインポートされないことはあったのですが、ビルトインでも自作でも、ほとんどのクラスは自動でインポートされました。すごい！！
＊ 使い始めの時は、自動でインポートされずに入力後にサジェストされることがあるかもしれませんが、何度かそのまま使ったら自動でインポートされるようになりました。
要望
新しいインポート文が既存のインポート文の上の行に追加されていくため、上の行に追加するか下の行に追加するかを設定できたらいいな〜、と思いました。
おわりに
「Auto Import」のおかげでAngular開発がより快適になりました。publisherのsteoatesさん、素晴らしい拡張機能をありがとうございます。