Visual Studio CodeでAngularプロジェクトの開発をするために必要な拡張機能をインストールしていきます。
ここで紹介する拡張機能は以下の3つです。
- Angular Language Service
- Angular Snippets (Version 16)
- EditorConfig for VS Code
ここに掲載している拡張機能は必須といえるものを選んでいます。すべての拡張機能がAngularプロジェクトの作成直後から使用可能です。
では、一つずつ見ていきましょう。
Angular Language Service
Angularチーム公式の拡張機能で、テンプレートファイル内でのIntelliSense機能や定義へのジャンプなど、様々な便利な機能を提供しています。
Angularアプリケーションの開発を行う際は必ず入れておきましょう。
Angular Snippets (Version 16)
いくつかのバージョン対応版が見つかると思いますが、今回使用するバージョンは16.xですので、対応するバージョンの拡張機能を使用しています。
強力な拡張機能であることは間違いありませんが、人によっては使用する／しないがはっきり分かれると思います。最近ではGitHub CopilotなどのAIを活用したコード生成も手段としてあるので、必要性を感じない場合はインストールしなくても問題ありません。
EditorConfig for VS Code
Angularプロジェクトを作成すると、.editorconfigファイルが作成されていますので、これを有効化させるために導入します。
実務のことを考えるとPrettierやESLintを導入する必要がありますが、プロジェクト作成直後では使える状態になっていないため、今回の拡張機能から除外しました。
EditorConfigを使うべきか否か
Prettierを導入する場合、EditorConfigは必要かどうか、という議論があるようです。機能的には重複している部分があるため、EditorConfigを使わずにPrettierのみを使用する、という選択肢もアリという主張はそれなりに筋が通っています。
ただ、PrettierとEditorConfigは共存可能で、VSCode以外のIDEを自由に使用するという選択肢がある場合、多くのIDEでサポートされているEditorConfigの設定ファイルを残しておくことで、Prettierの設定が行われていない場合やGitのpre-commit時にしかPrettierが動作しない状況などにおいても必要最低限のフォーマットが行われるというメリットがあります。
そのため、本記事では必要な拡張機能にEditorConfig for VS Codeを挙げています。
まとめ
今回はAngularプロジェクトの開発に最低限必要なVisual Studio Codeの拡張機能3つをインストールしていきました。
実用面を考えると、PrettierとESLintの導入は必要ですので、次回はPrettierとESLintの導入とHuskyによるpre-commitフックの設定を行っていきましょう。
