VSCodeをインストールする方法とは？設定方法まで丁寧に解説

VSCodeは軽量で使いやすいコードエディター

VSCodeは様々な開発で使用されているコードエディターです。VSCodeは軽量なことで知られ、起動時に使用するメモリが少ない特徴があります。

またインテリセンスやデバッグ機能など、様々な機能が搭載されています。さらにVSCodeは機能面が充実しているだけでなく、インストールの方法も簡単です。

本記事では、VSCodeのインストールと初期設定までを丁寧に解説します。これからVSCodeを使おうと考えている方は、ぜひ本記事を参考にして一緒に作業をしましょう。

【参考】：Code editing.Redefined.

OSごとにダウンロードするVSCodeが異なる

VSCodeの公式サイトでは、OSごとにダウンロードボタンが分かれています。ダウンロードをする時は、必ずお使いの環境にあったアプリケーションをダウンロードしてください。

またダウンロードのページには、下図のようにOSのバージョンが表示されています。（①）ダウンロードをする際には、VSCodeが対応しているバージョンかどうかも併せて確認しましょう。

下図の赤枠を押すと、VSCodeがダウンロードされます。バージョンなどの確認ができたら、お使いのOSのボタンを押しましょう。

【図】：ダウンロード画面

【参考】：Code editing.Redefined.

VSCodeのインストール方法

VSCodeのダウンロードが完了したら、インストールを開始しましょう。先ほどダウンロードしたセットアップ用のアプリケーションを起動して下さい。

アプリケーションを起動すると、「使用許諾契約書をお読みください」と表示されますので、内容を確認しましょう。内容に同意する場合は、「同意する」にチェックを入れて「次へ」ボタンを押します。

【図】：使用許諾契約書の同意画面

次に「追加タスクの選択」という画面が現れます。ここでオプションを設定しましょう。デフォルトでは下2つの項目にチェックが入っていますが、お好みで変更しても問題ありません。

ちなみに1番下の項目「PATHへの追加（再起動後に使用可能）」は、チェックを入れておけば環境変数の追加などの設定が不要になります。面倒な初期設定が不要ですので、すぐにVSCodeを使用したい方は、チェックを入れておきましょう。 

【図】：追加タスクの選択画面

最後に「インストール準備完了画面」という画面が表示されます。画面中央の「追加タスク一覧」という箇所に、先ほどチェックを入れた項目が表示されているか確認しましょう。

オプションの項目を変更したい場合は、画面の下の「戻る」ボタンを押し、オプションの設定をします。設定内容に問題がなければ「インストール」ボタンを押しましょう。

【図】：インストール準備完了画面

無事にインストールが終わると「Visual Studio Codeセットアップウィザードの完了」という画面が表示されます。そのままVSCodeの設定をする場合には、画面中央の「Visual Studio Codeを実行する」のチェックを入れたままにします。

最後に「完了」ボタンを押したら、インストールは完了です。チェックを入れたままにした方は、VSCodeが起動しますので、そのまま初期設定を始めましょう。

VSCodeを日本語に変更する

VSCodeはデフォルトの言語が英語のため、インストールが完了したら日本語に変更する必要があります。その際、日本語で表示させるためには、拡張機能の設定が必要です。

VSCodeでは日本語化の設定にとどまらず、他の場面でも拡張機能を頻繁に使用します。例えばVSCodeではJavaScript、Node.js、TypeScriptがサポートされていますが、他の言語を使いたい場合には拡張機能を使いましょう。

また、その他にもデバッガなどを使いたい場合にも、拡張機能を使用しています。ここからは、日本語表記の設定を通して、拡張機能の導入方法を解説します。 

TypeScriptはJavaScriptの上位互換？違いは開発規模や機能面にアリ

Node.jsとは？JavaScriptとの違いや使い所を解説

まずは、VSCodeの画面を起動した状態にしてください。そしてVSCodeの画面の左側にある、「アクティビティバー」の1番下にある「拡張機能」のアイコンをクリックします。

この拡張機能のアイコンは「Ctrl」＋「Shift」＋「X」 でも開くことができます 。拡張機能を開くと、画面の左側に拡張機能の一覧が表示されることを確認しましょう。ご自身がインストールしたい拡張機能を、下図の赤枠で囲われた検索窓に入力して探しましょう。

【図】：拡張機能の検索画面

今回は例として「Japanese Language Pack for Visual Studio Code」をインストールします。VSCodeはデフォルトの設定は英語表記のため、日本語化をしたい方はこちらの拡張機能をインストールしましょう。

左側の拡張機能の検索窓から「Japanese Language Pack for Visual Studio Code」を検索すると、画面右側に拡張機能の詳細が表示されます。

【図】：拡張機能の詳細画面

画面上部のインストールという青いボタンを押すと、インストールが開始されます。インストールが完了すると、画面右下にポップアップが出ますので、「Change Language and Restart」という青いボタンを押しましょう。

ボタンを押すと、VSCodeが再起動します。再起動後の画面が日本語に切り替わっていれば、うまく拡張機能がインストールできました。

他の拡張機能についても、上記のような流れで拡張機能を検索してインストールをすれば、すぐに使えるようになります。その他に導入したい拡張機能があれば、同様の手順でインストールをしてみましょう。

【参考】：拡張機能マーケットプレイス

ユーザとワークスペースの設定

次に、ユーザの設定とワークスペースの設定を行います。どちらの設定もそれほど難しくありませんので、一緒に手を動かして作業してみましょう。

まずはユーザー設定から行いましょう。ユーザー設定は、画面左下の歯車マークを押すと開くことができます。ユーザー設定では、エディターのフォントや書式設定、エンコードなどを細かく設定できます。また基本的にはプルダウンで選択をする形式が多いため、難しい作業は必要ありません。

基本的には好みで設定をしていただければ良いと思いますが、「テキストエディター」の箇所は一度目を通して設定をすることをおすすめします。

例えばインデントを自動で揃えるかといった、細かいポイントを自分好みにカスタマイズできるので、ここをしっかり設定しておくと非常に作業効率が良くなるでしょう。

【参考】：ユーザーとワークスペースの設定

次にワークスペース設定について解説します。VSCodeのワークスペースでは、特定のフォルダーをワークスペースに設定できます。するとそのワークスペースに限定して、特定の設定や拡張機能の有無の設定が可能です。

VSCodeのワークスペースを追加するには、Vscode の画面左上の「ファイル」から開くことができます。例えば特定のフォルダをワークスペースに追加したい場合には、「ファイル」（①）の「フォルダーをワークスペースに追加」（②）を選択し、フォルダを追加するだけでワークスペースを設定できます。

【図】：ワークスペースの追加

その他にもマルチルートワークスペースという複数のフォルダをワークスペースとして構成する方法もあります。こちらは応用的な使い方になりますので、もしマルチルートワークスペースの設定方法

が気になる方はVSCodeの公式サイトを参考にしてください。

【参考】：ユーザーとワークスペースの設定 【参考】：マルチルート ワークスペース

VSCodeの紹介ビデオも活用しよう

VSCodeの公式サイトにはセットアップを含め、VSCodeの使い方を紹介する動画が用意されています。解説動画は英語ですが、操作を実際に見ながら作業できます。また動画の下に概要が説明されていますので、ブラウザの翻訳機能などを活用すれば日本語で、ある程度内容を把握できます。

紹介動画はセットアップの動画の他にも、より効率的な使い方やデバッグの方法も紹介されています。これからVSCodeを活用する方は、ぜひこちらも参考にしてみてください。

【参考】：紹介ビデオ

VSCodeを活用して効率的に開発しよう

VSCodeのインストールは手順も少なく、非常に簡単だとお分かりいただけたかと思います。初期設定なども簡単で、すぐに開発を始められるのがVSCodeの特徴です。

また、拡張機能やユーザー設定などで、後から自分好みにカスタマイズできるのもVSCodeの魅力です。これからVSCodeを使いたいと考えている方は、ぜひ本記事を参考にしてインストールをしてみてください。

VSCodeのショートカット一覧！開発作業を効率化する秘訣を解説

VS Codeのプラグインとは？導入方法やおすすめの拡張機能も紹介