Visual Studio Codeのインストール方法を紹介していきます。
当記事ではWindowsとMacのインストール方法を紹介していきます。
紹介環境
紹介に利用する環境は以下のようになります。環境が異なる場合、手順が異なりますので、ご了承ください。
- Windows10(64bit)
- macOS14(Arm64)
Visual Studio Codeのインストール(Windows)
WindowsでのVisual Studio Codeのインストール手順を紹介します。
手順1:Visual Studio Codeのインストーラーをダウンロード
Microsoftの公式サイトからVisual Studio Codeのインストーラーをダウンロードします。以下のリンクから画面を表示することができます。
以下のような画面が表示されますので、「Download for Windows」を選択してください。
![Visual Studio Codeのインストーラーのダウンロード画面](https://pg-himajin.com/wp-content/uploads/2024/02/page1563-52-1024x763.webp)
選択後、以下のような画面が表示されます。少し待つことでダウンロードが完了します。
![Visual Studio Codeのインストーラーのダウンロード中の画面](https://pg-himajin.com/wp-content/uploads/2024/02/page1563-54-jpg.webp)
手順2:Visual Studio Codeのインストーラーを起動
ダウンロードされたVisual Studio Codeのインストーラーを起動させてください。
保存場所を変更していない場合、Visual Studio Codeのインストーラーは以下のようにダウンロードフォルダにダウンロードされます。
![ダウンロードフォルダにダウンロードされたVisual Studio Codeのインストーラー](https://pg-himajin.com/wp-content/uploads/2023/09/page1563-5-jpg.webp)
手順3:Visual Studio CodeのインストーラーからVisual Studio Codeをインストール
Visual Studio Codeのインストーラーを起動すると、「使用許諾契約書の同意」画面が表示されます。「同意する」を選択し、「次へ」を選択してください。
![Visual Studio Codeのインストール(Windows)の「使用許諾契約書の同意」](https://pg-himajin.com/wp-content/uploads/2024/02/page1563-55-jpg.webp)
次に「インストール先の指定」画面が表示されます。この画面ではインストール先を設定することができます。インストール先に問題が無ければ「次へ」を選択してください。
![Visual Studio Codeのインストール(Windows)の「インストール先の指定」](https://pg-himajin.com/wp-content/uploads/2024/02/page1563-56-jpg.webp)
次に「スタートメニューフォルダの指定」画面が表示されます。この画面ではスタートメニューの表示に関する設定を行えます。スタートメニューの表示の設定に問題が無ければ「次へ」を選択してください。
![Visual Studio Codeのインストール(Windows)の「スタートメニューフォルダの指定」](https://pg-himajin.com/wp-content/uploads/2024/02/page1563-57-jpg.webp)
次に「追加タスクの選択」画面が表示されます。追記したい機能を選択して「次へ」を選択してください。
![Visual Studio Codeのインストール(Windows)の「追加タスクの選択」](https://pg-himajin.com/wp-content/uploads/2024/02/page1563-58-jpg.webp)
「インストール準備完了」画面が表示されます。今まで設定した内容が表示されています。内容に問題が無ければ「インストール」を選択してください。
![Visual Studio Codeのインストール(Windows)の「インストール準備完了」](https://pg-himajin.com/wp-content/uploads/2024/02/page1563-59-jpg.webp)
「Visual Studio Code セットアップウィザードの完了」画面が表示されれば、Visual Studio Codeのインストールが完了します。「完了」を選択することでインストーラーが閉じられます。インストーラーを閉じた後にVisual Studio Codeを起動したくない場合は、「Visual Studio Codeを実行する」のチェックを外してから「完了」を選択してください。
![Visual Studio Codeのインストール(Windows)の「セットアップウィザードの完了」](https://pg-himajin.com/wp-content/uploads/2024/02/page1563-60-jpg.webp)
Visual Studio Codeのインストール(Mac)
MacでのVisual Studio Codeのインストール手順を紹介します。
手順1:Visual Studio Codeのインストーラーをダウンロード
Microsoftの公式サイトからVisual Studio Codeをダウンロードします。以下のリンクからダウンロードする画面に移動できます。
以下のような画面が表示されますので、「Download Mac Universal」を選択してください。
![Visual Studio Codeのダウンロードサイト](https://pg-himajin.com/wp-content/uploads/2023/12/page2080-1-1024x762.webp)
以下の画面に移動されインストールが開始されます。
![Visual Studio Codeのダウンロードが開始されるサイト](https://pg-himajin.com/wp-content/uploads/2023/12/page2080-2-1-1024x763.webp)
手順2:Visual Studio Codeを起動
ダウンロードから「Visual Studio Code」を選択することで起動できます。
![Visual Studio Codeのダウンロードから開始](https://pg-himajin.com/wp-content/uploads/2023/12/page2080-3-1-jpg.webp)
初回起動の場合、以下の画面が表示されます。「開く」を選択することでVisual Studio Codeが起動されます。
![Visual Studio Codeをインターネットからダウンロードしたので警告](https://pg-himajin.com/wp-content/uploads/2023/12/page2080-4-jpg.webp)
Visual Studio Codeの日本語化
Visual Studio Codeを起動すると以下のように英語になっていますので、日本語に設定する方法を説明していきます。
![Visual Studio Codeの起動時の見た目](https://pg-himajin.com/wp-content/uploads/2023/12/page2080-5-1024x662.webp)
※説明にはMac版を利用していますが、Windows版でも同じ手順になります。
手順1:Extensions(拡張機能)を開く
以下のようにExtensionsを選択します。
![Extensions(拡張機能)の開き方](https://pg-himajin.com/wp-content/uploads/2023/12/page2080-6-2-1024x711.webp)
※Macの場合、「cmd」「shift」「x」の同時押しで開けます。
※Windowsの場合、「ctrl」「shift」「x」の同時押しで開けます。
手順2:「 Japanese Language Pack for Visual Studio Code」をインストール
検索欄に「Japanese Language Pack for Visual Studio Code」と入力します。入力することで「 Japanese Language Pack for Visual Studio Code」が一番上に表示されますので、「install」を選択します。
![Japanese Language Pack for Visual Studio Codeをインストール](https://pg-himajin.com/wp-content/uploads/2023/12/page2080-7-1024x709.webp)
手順3:「Change Language and Restart」を選択
以下のように左下の「Change Language and Restart」が表示されますので選択してください。
![Visual Studio Codeを再起動](https://pg-himajin.com/wp-content/uploads/2023/12/page2080-8-1024x712.webp)
「Visual Studio Code」が再起動され、以下のように日本語表示されるようになります。
![Visual Studio Codeを再起動に日本語化](https://pg-himajin.com/wp-content/uploads/2023/12/page2080-9-1-1024x709.webp)
おわりに
Visual Studio Codeでは様々な開発を行うことができます。以下では.Net MAUIの開発環境の整備方法を紹介していますので、良ければ参考にしてみてください。