「Visual Studio Code」（以下、VSCode）はMicrosoftが開発している高機能コードエディターです。誰でも無償でダウンロードして利用できます。Windowsはもちろん、macOSやLinuxといったOSで動作し、オープンソースとしてGitHubでソースコードが公開＊1されています。
開発効率を向上させるためのコーディング支援機能や、チーム開発をスムーズにするための「拡張機能」が数多く提供されており、それら拡張機能で自分好みにVSCodeをカスタマイズできる特徴があります。
人気の拡張機能や最新の拡張機能は公式のマーケットプレイス＊2で確認できますが、たくさん公開されていて選ぶのが大変です。そこで本特集では、特におすすめの拡張機能や定番の拡張機能を、「コーディング支援」「バージョン管理」「いつでも快適環境」「仕事活用」の4つのジャンルに分けて紹介していきます。
VSCodeのインストールと画面の見方
まずは、VSCodeをインストールしましょう。次のURLからVSCodeの公式サイトにアクセスし、自分のパソコンの環境に合ったインストーラーをダウンロードします。ダウンロードしたインストーラーでVSCodeをインストールします。
VSCodeの公式サイトのダウンロードページ
https://code.visualstudio.com/download
なお、WebブラウザからVSCodeを利用できる「Visual Studio Code for the Web」＊3もありますが、本稿執筆時点の仕様では、利用できる拡張機能に制限がありました。そこで、本稿ではデスクトップ版を使用します。
それではVSCodeを起動してみましょう。デフォルトでは画面の表示言語は英語ですが、このあとすぐに日本語表示にするための拡張機能をインストールしますので、ここでは日本語表示で画面の説明を進めます。
図1の画面のアクティビティバーに並んでいる「エクスプローラー」や「拡張機能」のアイコンを押すことで、サイドバーの画面を切り替えることができます。「エクスプローラー」では、フォルダーを開いてサイドバーにファイル構成を表示できますので、任意のフォルダーを開いておきましょう。エディターは、ファイルなどを開いて編集する画面です。
さらに、アクティビティバーの下部にある歯車の形をした「管理」アイコンを押すとメニューが表示されます（図2）。「コマンドパレット」と「設定」はよく使うので、以下のショートカットキーを覚えておくと便利です。
●コマンドパレット
Windows：［Ctrl］+［Shift］+［P］
macOS：［Cmd］+［Shift］+［P］
●設定
Windows：［Ctrl］+［,］
macOS：［Cmd］+［,］
また、図2のメニューの「配色テーマ」を選ぶと、VSCodeのデフォルトの配色（黒地に白文字）を変えることができます。ぜひ自分好みの配色にカスタマイズしてみてください。
