Visual Studio Codeのインストールと最初にするべき4つの設定

Visual Studio Codeのロゴ

世の中に沢山あるテキストエディターの中で、1.2を争う人気エディターVisual Studio Code

今回は、Visual Studio Codeに惚れ込んだ男が、インストール方法といじるべき基本設定について解説します。

解説する環境はMac OSですが、windowsの方もほとんど一緒なのでご安心ください!

また、どんな言語を扱うにしても、絶対抑えておきたい設定4つのご紹介となります!

Visual Studio Codeのインストール方法

visual studio code

まずは、Visual Studio Codeの公式サイトにいって、ダウンロードしましょう。

>>Visual Studio Code Mac版

>>Visual Studio Code Windows版

ダンロードボタンを押すとページが遷移して、ダウンロードが始まります。

Visual Studio Codeのインストール画面

ダウンロードが完了したら、zipファイルを解凍しましょう。

すると、Webからダウンロードされたアプリですが、大丈夫ですか?という表示がなされます。

Visual Studio Codeのインストール確認画面

Visual Studio Codeは怪しくないサイトなので、安心して開くを押してください。

すると、Visual Studio Codeが立ち上がり、インストールは完了です。

Visual Studio Code

Widows版の方もインストールのやり方は簡単で、インストールして解凍すればOKです。

念のために、Qiitaというサイトで解説されている、Windows版のインストール方法についてのサイトを置いておきます。
>>Visual Studio Code (Windows版) のインストール

言語設定を日本語にする

まずは、Visual Studio Codeの言語設定を変更していきましょう。

インストール環境によっては英語で表示されてしまうため、日本語用に変更します。

まずは、Visual Studio Codeの左側、メニューのなかから、四角のアイコンをクリックしてください。

Visual Studio Codeの言語設定

すると、文字を入力する検索バーが出てきます。

Visual Studio Codeの言語設定

この検索バーの中に、Japanese Language Pack for Visual Studio Codeと打ち込んでみましょう。

Japanese Language Pack for Visual Studio Code

すると一番上の部分に日本語化するためのパッケージが表示されるので、クリックしてください。

Japanese Language Pack for Visual Studio Codeの紹介

緑色のボタン、インストールをクリックしてください。

インストールが完了したら、Visual Studio Codeに反映させていきましょう。

どの画面でも大丈夫ですので、

Mac: Command + Shift + P
Windows: Ctrl + Shift + P

を押してください。
すると、検索ボックスが表示されます。

Japanese Language Pack for Visual Studio Codeのインストール

検索ボックスでは、Visual Studio Code内のさまざまな情報や設定を検索できます。

今回は、以下のように入力してみてください。

>Configure Display Language

enter keyをクリック
言語選択

すると、言語を選択できるようになります。
JPを選択してみましょう。

日本語選択

言語選択すると、再起動共に変更できるようという内容の表示がなされるので、再起動をクリック。

Visual Studio Codeの再起動

再起動したVisual Studio Codeは、日本語対応になっています。

Visual Studio Codeが日本語対応

Visual Studio Codeの日本語化、完了です!

エディターの色合い変更する

次は、Visual Studio Codeのエディターの色合いを変更しましょう。

まず、デォルトのエディターの色合いをみてみてください。

Visual Studio Codeのエディターのデフォルトの色合い

色分けされていますが、少しみにくいですよね。

では、こちらはどうでしょうか?

Visual Studio Codeのエディターの色合いを変更後

圧倒的にみやすいですね!

コードの色分けがはっきりしているのは、ミスを減らすと共に可読性をあげてストレスも減らしてくれます。

それでは早速変更していきましょう。

まずは、Visual Studio Codeの上の方のメニューバーを表示させてください。

Visual Studio Codeのメニュー

Codeから基本設定をクリック。
windowsの方はVisual Studio Code左下の歯車アイコンをクリックしてください。

Visual Studio CodeのCode

配色テーマを選びましょう。

Visual Studio Codeの配色テーマ

すると、様々なテーマを選べるようになるので、Monokaiをクリックします。

Monokai

これで完了です。

インデント(字下げ)幅の変更して

次は、コードのインデントの幅を変更します。

プログラミングのコードを書く際に、Tabキーを利用してコードをみやすくするのですが、Visual Studio Codeの初期設定は4になっています。

<div>
  <p>インデント幅が2です</p>
    <p>インデント幅が4です</p>
</div>

別にコード自体に影響しないのですが、基本的にインデント幅は2であることが多いので、みやすさを重視して2に変更しましょう。

やり方は簡単で、先ほどのと同じように上部のメニュー>Code>基本設定>設定 をクリック。

Visual Studio Codeの設定

すると、色々設定を変更できるページが出現します。

Visual Studio Codeの設定

ここから、Tab Sizeを変更できる箇所を探します。
上から5コ目くらいの所にあります。

そして、Tab Sizeの数字を4から2に変更しておきましょう。

Visual Studio Codeのインデント幅を変更する

これで、インデントの文字数が2に変更されました。

折り返しの設定

最後にご紹介する設定は、コードの折り返しの設定です。

たとえば、デフォルトのVisual Studio Codeだと、長文を打つと折り返されません。

Visual Studio Codeの折り返し設定

こうなると、文字を確認する際にいちいち横スクロールで確認しなければいけなくて、とても不便です。

なので、折り返して可読性が高いエディターに変更しましょう。

Visual Studio Codeの折り返し設定

やり方はシンプルです。
文字のインデントを変えた時のように、設定を開きます。

Visual Studio Codeの設定

設定画面の上部に検索バーが出現するので、そこでwordwrapを検索してください。

Visual Studio Codeの設定

変更するのはこの一番上の設定です。
折り返しに関する設定なのですが、この設定をoffからonへ変更しましょう。

Visual Studio Codeの折り返し設定をonにする

これで、長文を入力しても自動で文字が折り返されるようなりました。

アイコンを表示させる

次は、Visual Studio Codeにアイコンを表示させていきましょう。

アイコンはデフォルトだとこんな感じです。

Visual Studio Codeのアイコン設定

ただ、これだとみにくいので、専用のアイコンパックを導入します。
導入すると、かなり見やすくなりましたね。

それでは導入していきます。
まずは、言語設定の時と同じように、左側のメニューから四角のアイコンをクリックして、検索ボックスを出現させます。

Visual Studio Codeの言語設定

今回は、Simple icon themeと検索してください。

上から二つ目に出てきたアイコンパックをインストールします。

すると、変更するための表示がポップアップするので、Simple iconsをクリックしてください。

これで完了です。

まとめ

Visual Studio Codeはプログラミングエディターの中でトップクラスに使いやすいエディターです。

あまりに機能が多すぎるため、ここでは紹介しきれなかった拡張機能もまだまだありあます。

拡張機能を使うことで、コードを書く時間を何倍にも減らすことができます。

ぜひ、自分に最適な設定を見つけて、効率よく開発できるようにしてみてください!