Visual Studio CodeでAngularの開発を行う！VSCodeの使い方とオススメの拡張機能。

この記事では、Visual Studio Code（以下VSCode）のインストールから日本語化までの手順とAngularの開発をおこなうためにインストールしておきたいオススメの拡張機能（エクステンション）を紹介する。

VSCodeは世界中で使われている今もっとも人気のあるIDE。

AngularのみならずJavaScriptのフレームワークとは相性がいい。まだ、使ったことが無い人はぜひ一度使ってみてほしい。

VSCodeとは？

公式サイト:: https://code.visualstudio.com

Visual Studio CodeはMicrosoft社が開発しているコードエディタ。IDE（統合開発環境）とも呼ばれる。

2021年の現在、もっともよく使われている開発ツールであり、JavaScript関連のプロジェクトをはじめJavaやC++の開発もおこなうことができる。

VSCodeはオープンソースプロジェクトであり、すべての機能を無料で使用することができる。

豊富に用意されているサードパーティー製の拡張機能（エクステンション）を使い自分の好みに合わせて機能を拡張させることができる。

なお、JavaScript向けのIDEについてもっと知りたい人はこちらの記事をどうぞ。

VSCodeのインストール

では、VSCodeをインストールしてAngularの開発をおこなうための準備を整えよう。

インストーラーをダウンロードする

まずはVSCodeの公式サイトを開き、お使いのOSに対応したインストーラーをダウンロードする。

「Stable」は公式にリリースされた安定しているバージョン。特に理由がなければこちらを使用するようにしよう。

VSCodeをインストールする

インストーラーのダウンロードが完了したら、そのファイルを開いてインストールを始めよう。

まず、最初に利用規約の同意を求められるので「同意する」を選択して「次へ」ボタンをクリックする。

次にVSCodeのインストール先を指定する。特にフォルダを指定する理由がそのまま「次へ」をクリックする。

次にスタートメニューフォルダの指定を行う。これもそのまま「次へ」をクリックする。

次に追加タスクの選択画面が表示される。

ここでは、必要に応じてタスクを追加しよう。今後、VSCodeをメインの開発ツールとして使う予定の人はすべてにチェックを入れよう。

最後に設定の確認画面が表示される。問題がなければ「インストール」をクリックしてインストールを開始する。

インストールが終了すると完了の確認画面が表示されるので、「完了」をクリックして終了する。

日本語化パックをインストールする

インストールしたVSCodeは画面表示が英語になっている。日本語に変更したい人はこの章を読んでほしい。

まずはデスクトップに作成されたショートカットをダブルクリックしてVSCodeを起動する。

起動した際に画面の右下に以下のようなメッセージが表示される場合は、「インストールして再起動」をクリックする。

上のメッセージが表示されない場合は自分で日本語化パックを自分でインストールする。

画面左側のサイバーから「Extentions」ボタンをクリックして拡張機能の画面を開く。画面左上の検索窓に「japanese」と入力すると関連する拡張機能が表示される。

一番上に表示されている「Japanese Language Pack for Visual Studio Code」をクリックして詳細を表示する。

問題が無ければ「Install」をクリックして言語パックをインストールする。

インストールが終了したらVSCodeを再起動して言語表示が日本語になっているか確認する。

Angularのための拡張機能

次にAngularの開発に役立つVSCodeの拡張機能を紹介しよう。

VSCodeの拡張機能について

VSCodeの最大の売りは豊富な拡張機能（エクステンション）だ。

拡張機能には単体のものと、いくつかの拡張機能をセットにした拡張機能パックがある。

• 単体の拡張機能
  単独の機能をもつ拡張機能。
  
  メリット ⇒ インストールされている機能を把握しやすい。
  デメリット ⇒ ひとつひとつインストールするので手間がかかる。
  
• 拡張機能パック
  複数の拡張機能をテーマごとにセットにしたもの。
  
  メリット ⇒ 選ぶのやアップデートするのが楽。
  デメリット ⇒ いらない機能までインストールされる。

なお、拡張機能は自動でアップデートするように設定することも出来る。

オススメのAngular拡張機能

では、オススメの拡張機能を紹介しよう。

ここでは、単体の拡張機能を5つと拡張機能パックをひとつ紹介する。

Angular Language Service

「Angular Language Service」はオートコンプリートやドキュメント表示など、Angularのための基本的な入力補助機能を提供する拡張機能だ。

とても人気のある拡張機能であり、VSCodeをIDEのような使い心地で使用したいと考えるなら、まず最初に入れておくべきだ。

Angular Snippets

次に紹介するのは「Angular Snippets」。同じような名前の拡張機能がいくつか存在するが、ここでは「John Papa」 が発行者のものをおススメする。

Snippetsは繰り返し使われるコードの集まりを、短い文字の入力によって呼び出すことができるようにした拡張機能。

使いこなせばコーディングのスピードを劇的に高めることができるだろう。

Prettier – Code formatter

「Prettier」は代表的なJavaScript・TypeScriptのためのコードフォーマッター。

JavaScriptはコーディングのルールが緩いプログラミング言語。フレキシブルにコードを記述できる反面、統一性の無い読みづらいコードを書いてしまうことも少なくない。

この拡張機能では、「改行」や「半角空ける」といったルールを自分の好みに合わせて定義することができる。

またコードの変更をセーブするたびに自動でフォーマットを適用するように設定することも可能だ。

NX Console

「NX Console」 はAngularのためのコマンド機能を分かりやすいユーザインターフェイスとともに提供する拡張機能。

Angularには「Angular CLI」というコマンド群が用意されているが、ターミナルを使ってそれらを記述するのは初心者に少し難しい。NX ConsoleはAngularコマンドのハードルの高さを取り除いてくれる便利な拡張機能だ。

angular2-switcher

「angular2-switcher」はファイル間のナビゲート（移動）をスムーズにしてくれる補助拡張機能。

開きたいファイルの定義を見つけたら「Ctrl」+クリックでそのファイルを新しいタブで開いてくれる。

機能自体はシンプルだが、生産性の向上に大きく貢献してくれる拡張機能だ。

Angular Essentials

Angular関連の拡張機能を手っ取り早く使いたいならこの「Angular Essentials」がおススメだ。

このパックにはAngularの開発でよく使われる12の拡張機能が含まれている。