![](https://mik2062.jp/wp-content/uploads/2022/08/fbb78db025839258a0abd0d6100df36a-150x150.png)
Visual Studio Codeの使い方が知りたいです
![](https://mik2062.jp/wp-content/uploads/2022/08/1341584-150x150.jpg)
![](https://mik2062.jp/wp-content/uploads/2022/08/1341584-150x150.jpg)
![](https://mik2062.jp/wp-content/uploads/2022/08/1341584-150x150.jpg)
Visual Studio Codeをインストール手順を説明します
Visual Studio Code について
Visual Studio Codeの特徴は以下になります。
- Microsoft製の無料のコードエディタ(商用利用可)
- 数多くのプラグインによって多彩な機能拡張ができる
- 比較的後発のエディタですが、今ではWEB制作で最も使われている
![](https://code.visualstudio.com/opengraphimg/opengraph-docs.png)
![](https://code.visualstudio.com/opengraphimg/opengraph-docs.png)
Visual Studio Code のインストール
以下の公式サイトにアクセスして 今すぐダウンロードをクリックします。
![](https://mik2062.jp/wp-content/uploads/2022/07/image-234-1024x405.png)
![](https://mik2062.jp/wp-content/uploads/2022/07/image-234-1024x405.png)
Mac の場合
Mac用のダウンロードボタンをクリックしてインストーラーをダウンロードします。
![](https://mik2062.jp/wp-content/uploads/2022/07/image-235.png)
![](https://mik2062.jp/wp-content/uploads/2022/07/image-235.png)
ダウンロードしたファイルをクリックして展開(Zipファイルを解凍)します。
![](https://mik2062.jp/wp-content/uploads/2022/07/image-237.png)
![](https://mik2062.jp/wp-content/uploads/2022/07/image-237.png)
アプリケーションファイルが展開されます。
![](https://mik2062.jp/wp-content/uploads/2022/07/image-238.png)
![](https://mik2062.jp/wp-content/uploads/2022/07/image-238.png)
アプリケーション
フォルダに移動します。
![](https://mik2062.jp/wp-content/uploads/2022/09/image-459.png)
![](https://mik2062.jp/wp-content/uploads/2022/09/image-459.png)
アプリケーションファイルをダブルクリックして起動します。
ダウンロードしたファイルの初回実行時には確認メッセージが出ますが開くボタンをクリックします。
![](https://mik2062.jp/wp-content/uploads/2022/09/image-460.png)
![](https://mik2062.jp/wp-content/uploads/2022/09/image-460.png)
Windows の場合
![](https://mik2062.jp/wp-content/uploads/2022/10/image-2-1024x460.png)
![](https://mik2062.jp/wp-content/uploads/2022/10/image-2-1024x460.png)
Windows用のダウンロードボタンをクリックしてインストーラーをダウンロードします。
![](https://mik2062.jp/wp-content/uploads/2022/07/image-236.png)
![](https://mik2062.jp/wp-content/uploads/2022/07/image-236.png)
ダウンロードしたインストーラーのファイルをダブルクリックして実行します。
![](https://mik2062.jp/wp-content/uploads/2022/10/image-3.png)
![](https://mik2062.jp/wp-content/uploads/2022/10/image-3.png)
![](https://mik2062.jp/wp-content/uploads/2022/10/image-4.png)
![](https://mik2062.jp/wp-content/uploads/2022/10/image-4.png)
![](https://mik2062.jp/wp-content/uploads/2022/10/image-48.png)
![](https://mik2062.jp/wp-content/uploads/2022/10/image-48.png)
使用許諾の画面が表示されるので、同意するを選択して次へボタンをクリックします。
![](https://mik2062.jp/wp-content/uploads/2022/10/image-37.png)
![](https://mik2062.jp/wp-content/uploads/2022/10/image-37.png)
インストール先の指定画面が開くので、インストール先のフォルダを確認して次へボタンをクリックします。
![](https://mik2062.jp/wp-content/uploads/2022/10/image-38.png)
![](https://mik2062.jp/wp-content/uploads/2022/10/image-38.png)
追加タスクの選択画面に進むので、設定したい項目にチェックを入れて次へをクリックします。
コンテキストメニューに[Codeで開く]アクションを追加する
というのは、ファイルやフォルダの右クリックメニューに[Codeで開く]を追加して直接Visual Studio Codeで開くことができるようにするためのものです。
![](https://mik2062.jp/wp-content/uploads/2022/10/image-49.png)
![](https://mik2062.jp/wp-content/uploads/2022/10/image-49.png)
![](https://mik2062.jp/wp-content/uploads/2022/10/image-50.png)
![](https://mik2062.jp/wp-content/uploads/2022/10/image-50.png)
![](https://mik2062.jp/wp-content/uploads/2022/10/image-39.png)
![](https://mik2062.jp/wp-content/uploads/2022/10/image-39.png)
これまでに入力した内容が表示されるので、問題なければインストール
をクリックします。
![](https://mik2062.jp/wp-content/uploads/2022/10/image-40.png)
![](https://mik2062.jp/wp-content/uploads/2022/10/image-40.png)
インストール処理が行われるのでしばらく待ちます。
![](https://mik2062.jp/wp-content/uploads/2022/10/image-41.png)
![](https://mik2062.jp/wp-content/uploads/2022/10/image-41.png)
インストール完了画面が表示されれば完了です。
![](https://mik2062.jp/wp-content/uploads/2022/10/image-42.png)
![](https://mik2062.jp/wp-content/uploads/2022/10/image-42.png)
日本語環境をインストールする
Visual Studio Codeは、最初は英語表示ですが少し待つと日本語言語パック
をインストールするためのボタンが表示されるのでクリックします。
![](https://mik2062.jp/wp-content/uploads/2022/07/image-241.png)
![](https://mik2062.jp/wp-content/uploads/2022/07/image-241.png)
プラグインメニューを開いてjapaneseで検索してJapanese Language Pack for Visual Studio Code
を選択してインストールします。
![](https://mik2062.jp/wp-content/uploads/2022/09/image-487.png)
![](https://mik2062.jp/wp-content/uploads/2022/09/image-487.png)
![](https://mik2062.jp/wp-content/uploads/2022/10/image-51.png)
![](https://mik2062.jp/wp-content/uploads/2022/10/image-51.png)
作業の開始
ページが開きます。毎回起動時にこのページが開くのは邪魔になることが多いので起動時にウェルカムページを表示のチェック
を外します。
![](https://mik2062.jp/wp-content/uploads/2022/10/image-53.png)
![](https://mik2062.jp/wp-content/uploads/2022/10/image-53.png)
設定の同期をオンにする
Visual Studio Codeは、別の環境にインストールしたVisual Studio Codeと、設定やインストールしたプラグインの内容を自動で同期させることができます。
アカウントメニューを開いて設定の同期をオンにする
をクリックします。
![](https://mik2062.jp/wp-content/uploads/2022/09/image-480-1024x704.png)
![](https://mik2062.jp/wp-content/uploads/2022/09/image-480-1024x704.png)
同期する内容を設定して サインインしてオンにするをクリックします。
![](https://mik2062.jp/wp-content/uploads/2022/09/image-489-1024x736.png)
![](https://mik2062.jp/wp-content/uploads/2022/09/image-489-1024x736.png)
同期に利用するアカウントを設定します。
![](https://mik2062.jp/wp-content/uploads/2022/09/image-490-1024x736.png)
![](https://mik2062.jp/wp-content/uploads/2022/09/image-490-1024x736.png)
Microsoftアカウントを選択した場合
ブラウザが開いてMicrosoftアカウントのログイン画面が表示されるのでログインします。
![](https://mik2062.jp/wp-content/uploads/2022/07/image-249-1024x728.jpg)
![](https://mik2062.jp/wp-content/uploads/2022/07/image-249-1024x728.jpg)
Microsoftアカウントでログインすると以下のページが表示されるのでブラウザを閉じます。
![](https://mik2062.jp/wp-content/uploads/2022/09/image-494-1024x555.png)
![](https://mik2062.jp/wp-content/uploads/2022/09/image-494-1024x555.png)
GitHubアカウントを選択した場合
ブラウザが開いてGitHubアカウントのログイン画面が表示されるのでログインします。
![](https://mik2062.jp/wp-content/uploads/2022/09/image-474.png)
![](https://mik2062.jp/wp-content/uploads/2022/09/image-474.png)
GitHubアカウントでログインするとブラウザからVisual Studio Codeを開くことの確認メッセージ出るので開くボタンをクリックします。
![](https://mik2062.jp/wp-content/uploads/2022/10/image-55.png)
![](https://mik2062.jp/wp-content/uploads/2022/10/image-55.png)
続いて、Visual Studio CodeでGitHub認証を許可するか聞かれるので開くボタンをクリックすると同期の設定は完了です。
![](https://mik2062.jp/wp-content/uploads/2022/10/image-46-1024x714.png)
![](https://mik2062.jp/wp-content/uploads/2022/10/image-46-1024x714.png)
以前に同期を設定したことがあり、その時にサーバーに保存した内容と現在の環境の内容が異なる場合、以下のメッセージが表示されるので、どちらの設定を活かすかを選択します。
手動でマージする | エディタでサーバーの設定内容(リモート)と見比べながら、最新の設定内容(ローカル)を編集します。 |
ローカルを置換 | サーバーの設定内容で、現在の設定を上書きします。 |
キャンセル | 同期を中止します。 |
マージ | サーバーの設定内容と現在の設定内容が自動で統合されます。 |
![](https://mik2062.jp/wp-content/uploads/2022/10/image-56.png)
![](https://mik2062.jp/wp-content/uploads/2022/10/image-56.png)