全2469文字
PR

 「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の画面のアクティビティバーに並んでいる「エクスプローラー」や「拡張機能」のアイコンを押すことで、サイドバーの画面を切り替えることができます。「エクスプローラー」では、フォルダーを開いてサイドバーにファイル構成を表示できますので、任意のフォルダーを開いておきましょう。エディターは、ファイルなどを開いて編集する画面です。

図1●VSCodeの画面
図1●VSCodeの画面
[画像のクリックで拡大表示]

 さらに、アクティビティバーの下部にある歯車の形をした「管理」アイコンを押すとメニューが表示されます(図2)。「コマンドパレット」と「設定」はよく使うので、以下のショートカットキーを覚えておくと便利です。

図2●「管理」アイコンのメニュー
図2●「管理」アイコンのメニュー
[画像のクリックで拡大表示]

●コマンドパレット

Windows:[Ctrl]+[Shift]+[P]
macOS:[Cmd]+[Shift]+[P]

●設定

Windows:[Ctrl]+[,]
macOS:[Cmd]+[,]

 また、図2のメニューの「配色テーマ」を選ぶと、VSCodeのデフォルトの配色(黒地に白文字)を変えることができます。ぜひ自分好みの配色にカスタマイズしてみてください。

*1 https://github.com/microsoft/vscodeで公開されています。
*2 Visual Studio MarketPlace(https://marketplace.visualstudio.com/)で確認できます。
*3 Visual Studio Code for the Web(https://vscode.dev/)は、2021年10月にMicrosoftから提供開始されました。