Visual Studio Codeで快適な開発作業を行うために、配色テーマの変更方法や、フォント設定、タブキー設定、プロキシ設定を変更する方法を解説します。
配色テーマの変更
Visual Studio Codeでは配色を変更することで見た目の雰囲気を変更することができます。配色はテーマとして管理されていてデフォルトでいくつかのテーマがインストールされていますが、追加でインストールすることも可能です。英語が得意な方はMicrosoft公式ページでも学習することができます。
配色テーマの変更方法
「ファイル」メニューからユーザー設定を選択し、表示されたサブメニューから「配色テーマ」をクリックします。
中央上部に「配色テーマの選択」画面が表示され、上下キーで各テーマのプレビューを確認できます。
「Monokai Dimmed」を選択します。
全体の配色が変更されました。
コマンドパレットからも設定を呼び出すことができます。
「メニュー」の「表示」＞「コマンドパレット」
コマンドパレットを表示して、「配色」と入力すると「基本設定：配色テーマ」が表示されるのでクリックしてください。
先程と同様に配色テーマの選択画面が表示されます。
配色テーマの追加
あらかじめインストールされている配色テーマに加えて、他のテーマを追加でインストールすることもできます。
インストールは拡張機能から行います。
アクティビティバーの「拡張機能」→「フィルタ」→「カテゴリ」→「Themes」を選択するとテーマ一覧がサイドバーに表示されます。
一覧からテーマをクリックするとエディタ画面にテーマに関する説明や使用している配色のプレビュー等が表示されます。
気に入ったテーマがあれば「インストール」ボタンをクリックするとインストールが実行され自動的に使用テーマとして設定されます。
追加した配色テーマの削除
追加でインストールした配色テーマを削除するには、「拡張機能」からインストール済の拡張機能を表示させ、削除したいテーマを選択します。エディタ画面に詳細が表示されるので「アンインストール」ボタンをクリックすると削除できます。
フォント設定
エディターやターミナルで使用するフォントの設定方法について解説します。
エディタのフォントを変更する
フォント設定を変更するには「ファイル」メニューから「ユーザー設定」を選択し、表示されたサブメニューの「設定」をクリックします。
設定の検索項目に「font」と入力するといくつかの設定項目が表示されます。この中の「Edtior: 」の項目がエディタに関する設定項目です。
「Editor:Font Family」の項目でデフォルトは「Consolas, ‘Courier New’, monospace」になっています。複数フォントを指定した場合は、前に指定したフォントが優先されます。
フォント名に空白が含まれている場合は、シングルクオーテーション（’）で囲んでください。
今回は 「Consolas, ‘Meirio UI’, monospace」 に変更しました。
これでフォントが変更されました。前後を比較すると日本語のフォントが変わっています。
エディタのフォントサイズを変更する
フォントサイズを変更するには先程と同様にフォント設定を表示して「Editor:Font Size」の項目を変更します。
今回は「18」に変更しました。
変更前と後を比較するとフォントの大きさが変更されていることが分かります。
ターミナルのフォントを変更する
フォント設定を変更するには「ファイル」メニューから「ユーザー設定」を選択し、表示されたサブメニューの「設定」をクリックします。
設定の検索項目に「font」と入力するといくつかの設定項目が表示されます。この中の「Terminal › Integrated:」の項目がターミナルに関する設定項目です。
「Terminal › Integrated: Font Family」の項目でデフォルトは空になっています。
今回は「’Meirio UI’, monospace」に設定しました。
変更前後を比較するとフォントが変更されています。
ターミナルのフォントサイズを変更する
フォントサイズを変更するには先程と同様にフォント設定を表示して「Terminal › Integrated: Font Size」の項目を変更します。
今回はフォントサイズを「18」に変更します。
変更前後を比較するとフォントサイズが変更されていることが確認できます。
タブキー設定
エディターでタブキーを押したときにタブとして入力するか、スペースに変換して入力するかを選択することができます。またタブキーをスペース何文字分として扱うかも設定できます。ここではタブキーを押したときの動作に関する設定方法について解説します。
タブでスペースを挿入するかの設定
Visual Studio Codeのデフォルトの設定ではタブキーを押すとスペースに変換されて入力されます。（・・・・の・がスペース１文字分を表しています）
これをスペースではなくタブとして入力する設定に変更していきます。
設定を変更するには「ファイル」メニューから「ユーザー設定」を選択し、表示されたサブメニューの「設定」をクリックします。
設定の検索項目に「insert space」と入力するといくつかの設定項目が表示されます。この中の「Editor: Insert Spaces」の項目がタブキーを押した時にスペースとして挿入するかの設定項目です。
デフォルトはチェックが入っていますので、このチェックを外します。
これでタブとして入力されるように設定されました。
タブをスペース何文字分にするかの設定
フォントサイズを変更するには先程と同様に設定を表示して検索項目に「tabsize」と入力して「Editor:Tab Size」の項目を表示します。
デフォルトでは「4」になっていますので、今回は「8」に設定します。
これでタブキーを押すとスペース８個分が入力されます。
ステータスバーから現在の設定を確認、変更する
ステータスバーから現在開いているファイルの設定を確認、変更することも可能です。
ステータスバーに「スペース：8」と記載されている部分が現在の設定です。
カーソルを当てると指マークに変わりますのでクリックします。
画面上部に設定項目が表示されるため、タブによるインデントを選択します。
タブサイズの選択画面に変わるので、「4」を選択します。
スペース４文字分のタブに変更されます。
インデント方式を自動的に検出する
新しいファイルを作成した場合は、設定値に基づいてインデントの方式が決まりますが、既に作成されているファイルを開いた場合は、ファイルに保存されている設定値を自動的に読み取って、現在の設定を上書きします。
自動で既存の設定値を読み込むかの設定は「Editor: Detect Indentation」で設定できます。この設定にチェックが入っている場合は、インデント設定を自動的に読み込み、上書きします。
実際に確認してみます。
上図の設定で新規ファイルを作成すると、「タブのサイズ：4」で設定されていますが、スペース4で設定されたファイルを開くと「スペース：4」で開かれます。
「Editor: Detect Indentation」のチェックを外して再度既存のファイルを開くと「タブのサイズ:４」とユーザー設定の設定値に変更されます。
Proxy設定（認証あり）
Visual Studio Codeの会社などで認証が必要なプロキシ環境で利用する場合、Visual Studio Codeを起動するたびにプロキシの認証ダイアログが表示されてしまいます。このような場合には認証プロキシの設定が必要になり。
こちらの記事（Windowsシステムの環境変数を設定する）のように、プロキシを環境変数で設定している場合は、設定が継承されますのでVisual Studio Codeでの設定は不要になります。
プロキシを設定する
「ファイル」メニューから「ユーザー設定」を選択し、表示されたサブメニューの「設定」をクリックします。
設定の検索項目に「proxy」と入力してProxy設定項目を表示させます。
「Http:Proxy」と「Http:Proxy Strict SSL」を設定します。
「Http:Proxy」に「http://USER:PASS@Proxyアドレス:ポート番号」 を設定して、 「Http:Proxy Strict SSL」 のチェックを外します。
以上で設定は終了です。ダイアログが表示されないことを確認してください。
Visual Studio Codeのカスタマイズ方法について解説しました。
・関連記事：Visual Studio Codeのインストールと日本語化
・関連記事：Visual Studio Codeでプログラム作成・実行・デバッグを行う