【Windows】Visual Studio Codeのインストール【Mac】

当ページのリンクには広告が含まれています。
  • URLをコピーしました!
生徒

Visual Studio Codeの使い方が知りたいです

先生

Visual Studio Codeをインストール手順を説明します

目次

Visual Studio Code について

Visual Studio Codeの特徴は以下になります。

Visual Studio Codeの特徴
  • Microsoft製の無料のコードエディタ(商用利用可)
  • 数多くのプラグインによって多彩な機能拡張ができる
  • 比較的後発のエディタですが、今ではWEB制作で最も使われている

商用利用可能なことは以下のページに記載されています。

Visual Studio Code のインストール

以下の公式サイトにアクセスして 今すぐダウンロードをクリックします。

Mac の場合

Mac用のダウンロードボタンをクリックしてインストーラーをダウンロードします。

ダウンロードしたファイルをクリックして展開(Zipファイルを解凍)します。

アプリケーションファイルが展開されます。

アプリケーションフォルダに移動します。

アプリケーションファイルをダブルクリックして起動します。

初回起動時は確認メッセージが表示されます

ダウンロードしたファイルの初回実行時には確認メッセージが出ますが開くボタンをクリックします。

Windows の場合

公式サイトからダウンロードします。

Windows用のダウンロードボタンをクリックしてインストーラーをダウンロードします。

ダウンロードしたインストーラーのファイルをダブルクリックして実行します。

管理者ユーザーで実行すると、”全てのユーザーにインストールしたい場合System Installerを使用してください。”というメッセージが表示される場合があります。

メッセージにあるように、パソコン上の全てのユーザーにインストールするにはSystem Installerをダウンロードします。

使用許諾の画面が表示されるので、同意するを選択して次へボタンをクリックします。

インストール先の指定画面が開くので、インストール先のフォルダを確認して次へボタンをクリックします。

追加タスクの選択画面に進むので、設定したい項目にチェックを入れて次へをクリックします。

不要なら後で削除すればよいので、デスクトップ上にアイコンを作成するにチェックを入れた方が便利です。(後からデスクトップにショートカットを作ればよいだけですが。)

コンテキストメニューとは

コンテキストメニューに[Codeで開く]アクションを追加するというのは、ファイルやフォルダの右クリックメニューに[Codeで開く]を追加して直接Visual Studio Codeで開くことができるようにするためのものです。

これまでに入力した内容が表示されるので、問題なければインストールをクリックします。

インストール処理が行われるのでしばらく待ちます。

インストール完了画面が表示されれば完了です。

日本語環境をインストールする

Visual Studio Codeは、最初は英語表示ですが少し待つ日本語言語パックをインストールするためのボタンが表示されるのでクリックします。

日本語言語パックを後からインストールするには

プラグインメニューを開いてjapaneseで検索してJapanese Language Pack for Visual Studio Codeを選択してインストールします。

作業の開始ページが開きます。毎回起動時にこのページが開くのは邪魔になることが多いので起動時にウェルカムページを表示のチェックを外します。

設定の同期をオンにする

Visual Studio Codeは、別の環境にインストールしたVisual Studio Codeと、設定やインストールしたプラグインの内容を自動で同期させることができます。

MicrosoftアカウントやGitHubアカウントを使用して、設定をクラウドに保存して同期が行われます。

アカウントメニューを開いて設定の同期をオンにするをクリックします。

同期する内容を設定して サインインしてオンにするをクリックします。

特に理由がなければ全てチェックONのままが便利でよいと思います。

同期に利用するアカウントを設定します。

Microsoftアカウント、GitHubアカウントのいずれを選んでも同期の動作に違いはありません。

Microsoftアカウントを選択した場合

ブラウザが開いてMicrosoftアカウントのログイン画面が表示されるのでログインします。

Microsoftアカウントでログインすると以下のページが表示されるのでブラウザを閉じます。

GitHubアカウントを選択した場合

ブラウザが開いてGitHubアカウントのログイン画面が表示されるのでログインします。

GitHubアカウントでログインするとブラウザからVisual Studio Codeを開くことの確認メッセージ出るので開くボタンをクリックします。

続いて、Visual Studio CodeでGitHub認証を許可するか聞かれるので開くボタンをクリックすると同期の設定は完了です。

既にサーバーに保存されている内容がある場合

以前に同期を設定したことがあり、その時にサーバーに保存した内容と現在の環境の内容が異なる場合、以下のメッセージが表示されるので、どちらの設定を活かすかを選択します。

手動でマージするエディタでサーバーの設定内容(リモート)と見比べながら、最新の設定内容(ローカル)を編集します。
ローカルを置換サーバーの設定内容で、現在の設定を上書きします。
キャンセル同期を中止します。
マージサーバーの設定内容と現在の設定内容が自動で統合されます。
よかったらシェアしてね!
  • URLをコピーしました!
目次