Visual Studio Codeで最初に設定しておきたい項目

Microsoft製の無料で人気のテキストエディタ「Visual Studio Code」を使うにあたって、最初に設定しておきたい設定項目があります。
それを少しご紹介します。
自分に合った使いやすいテキストエディタにしましょう。

 
WindowsもMacも設定方法はほとんど変わりありません。
ここではmacOSで説明していきます。

 
上部メニューの「code」から「preferences」>「Settings」と進みます。
Windowsだと「File」>「preferences」>「Settings」になります。

Visual Studio Codeの設定

 
まずはじめにVisual Studio Codeを使うと気になるのがフォントサイズや全角や半角のスペースの見分けがしにくいという点です。
設定をいろいろとみていきましょう。

 

フォントサイズの設定

Settingsには「User Settings」と「Workspace Settings」の2つがあります。
Workspace Settingsは個別のワークスペースやプロジェクトごとの設定を行うもので、User Settingsよりもこちらが優先されます。
Workspaceについては後述しますので後ほど。

フォントサイズなどはワークスペースやプロジェクトごとでも大体同じ設定にすると思いますので、タブを切り換えて両方変えておくと良いでしょう。
Commonly Usedの項目から「Editor:Font Size」の項目がありますので、こちらでフォントサイズを変更します。

Visual Studio Codeのフォントサイズの設定

 
単位はピクセルになります。
デフォルトでは12pxになっていますが、個人的には14pxがちょうどいい見やすいサイズかなと。

 

全角・半角スペースの表示設定

コーディングやプログラミングをするにあたり厄介なのが全角・半角スペースが混じってしまい、特にプログラミングではエラーの元となります。
デフォルトではスペースが全角か半角かが表示で見分けれないので、見分けがつくように表示させます。
Font Sizeの少し下あたりにあります「Editor:Render Whitespace」の項目を「all」に変更します。

Visual Studio Codeの全角・半角スペースの表示設定

 
エディタでファイルを開いて確認してみると半角スペースが「・」で表示されているのが確認できます。
半角スペースはデフォルトで4になっていますのでインデントで「・」が4つ表示されています。

Visual Studio Codeのインデント

 
プログラマーあるあるですが、インデントを半角スペース2つ派、4つ派、あとタブ派でけっこう分かれるのですが、これも個人的ですが4つが見やすいのかと。
Visual Studio CodeではTabでインデントをつけると設定してある半角スペース4つが入ります。
スペースキーを4回も押さなくていいです。これで半角スペース4つ派とタブ派の論争はなくなります。
インデントの半角の数はEditor:Render Whitespaceの上にある「Editor:Tab Size」の項目で変更可能です。

 

エディタ全体のズームイン・ズームアウト

人によってはメニューやアイコン、ファイルアイコン、テキスト、コードとエディタ全体を大きくしたりまたは小さくしたりしたい場合もあります。
また、なにかの拍子で変なキーを押してしまいエディタ全体が小さくなってしまい、戻し方がわからないという方がたまにいます。
ですのでエディタのズームイン・ズームアウトの設定もご紹介します。

上部メニューの「View」>「Appearance」と進むとズームインとズームアウトの項目がありますのでこちらで調整します。

Visual Studio Codeのエディタ全体のズームイン・ズームアウト

 
右に表示されているショートカットキーはキーボードの種類によって異なります。
私はUSキーボードになるのでZoom Inは「command + =」、Zoom Outは「command + -」となっています。
デフォルトに戻す場合はReset ZoomでOKです。

 

Workspaceの利用

前述でも少し触れましたWorkspaceですが、ワークスペースは複数のプロジェクトフォルダですぐに作業出来るようにディレクトリを設定しておくものです。
別のフォルダ階層のディレクトリの作業がいくつかある場合はワークスペースにまとめておいて、また開くときにワークスペースを開けばすぐに複数のディレクトリでの作業に取りかかれます。

1つのプロジェクトフォルダを開いている状態で、上部メニューの「File」から「Add Folder to Workspace…」を選択します。

Visual Studio CodeでのWorkspaceの利用

 
別のディレクトリのプロジェクトフォルダを選択して追加すればワークスペースが作成されます。
左メニューにワークスペースとして2つのプロジェクトフォルダがセットされています。
またSettingsでもワークスペースの他、プロジェクトフォルダごとでの設定もできます。

Visual Studio CodeでのWorkspaceの作成

 
ワークスペースを保存するまではワークスペースの名前はありません。

上部メニューの「File」から「Save Workspace As…」を選択してワークスペースを保存します。
.code-workspace」という拡張子での保存となります。
よく作業されるディレクトリにわかりやすい名前でワークスペースを保存してもらえばOKです。

例としてWebDevフォルダの中にWebDev01という名前で保存してみました。

Visual Studio CodeでのWorkspaceの保存

 
あとはWebDev01.code-workspaceをダブルクリックで開けば、先程のワークスペースですぐにいくつかのプロジェクトフォルダで作業を開始することができます。

 

最初の設定として最低でもフォントサイズやスペースの表示などを調整しておいたほうがデフォルトの設定よりも使いやすくなるでしょう。