Visual Studio Codeのカスタマイズ

スポンサーリンク
スポンサーリンク

Visual Studio Codeで快適な開発作業を行うために、配色テーマの変更方法や、フォント設定、タブキー設定、プロキシ設定を変更する方法を解説します。

スポンサーリンク

配色テーマの変更

Visual Studio Codeでは配色を変更することで見た目の雰囲気を変更することができます。配色はテーマとして管理されていてデフォルトでいくつかのテーマがインストールされていますが、追加でインストールすることも可能です。英語が得意な方はMicrosoft公式ページでも学習することができます。

配色テーマの変更方法

「ファイル」メニューからユーザー設定を選択し、表示されたサブメニューから「配色テーマ」をクリックします。

配色テーマ1

中央上部に「配色テーマの選択」画面が表示され、上下キーで各テーマのプレビューを確認できます。

配色テーマ3

「Monokai Dimmed」を選択します。

配色テーマ4

全体の配色が変更されました。

配色テーマ5

コマンドパレットからも設定を呼び出すことができます。
「メニュー」の「表示」>「コマンドパレット」

配色テーマ6

コマンドパレットを表示して、「配色」と入力すると「基本設定:配色テーマ」が表示されるのでクリックしてください。

配色テーマ7

先程と同様に配色テーマの選択画面が表示されます。

配色テーマの追加

あらかじめインストールされている配色テーマに加えて、他のテーマを追加でインストールすることもできます。
インストールは拡張機能から行います。
アクティビティバーの「拡張機能」→「フィルタ」→「カテゴリ」→「Themes」を選択するとテーマ一覧がサイドバーに表示されます。

配色テーマ8

一覧からテーマをクリックするとエディタ画面にテーマに関する説明や使用している配色のプレビュー等が表示されます。

気に入ったテーマがあれば「インストール」ボタンをクリックするとインストールが実行され自動的に使用テーマとして設定されます。

追加した配色テーマの削除

追加でインストールした配色テーマを削除するには、「拡張機能」からインストール済の拡張機能を表示させ、削除したいテーマを選択します。エディタ画面に詳細が表示されるので「アンインストール」ボタンをクリックすると削除できます。

フォント設定

エディターやターミナルで使用するフォントの設定方法について解説します。

エディタのフォントを変更する

フォント設定を変更するには「ファイル」メニューから「ユーザー設定」を選択し、表示されたサブメニューの「設定」をクリックします。

フォント設定1

設定の検索項目に「font」と入力するといくつかの設定項目が表示されます。この中の「Edtior: 」の項目がエディタに関する設定項目です。
「Editor:Font Family」の項目でデフォルトは「Consolas, ‘Courier New’, monospace」になっています。複数フォントを指定した場合は、前に指定したフォントが優先されます。
フォント名に空白が含まれている場合は、シングルクオーテーション(’)で囲んでください。

フォント設定2

今回は 「Consolas, ‘Meirio UI’, monospace」 に変更しました。

フォント設定3

これでフォントが変更されました。前後を比較すると日本語のフォントが変わっています。

フォント設定4
フォント設定5

エディタのフォントサイズを変更する

フォントサイズを変更するには先程と同様にフォント設定を表示して「Editor:Font Size」の項目を変更します。

フォント設定6

今回は「18」に変更しました。

フォント設定7

変更前と後を比較するとフォントの大きさが変更されていることが分かります。

フォント設定8
フォント設定9

ターミナルのフォントを変更する

フォント設定を変更するには「ファイル」メニューから「ユーザー設定」を選択し、表示されたサブメニューの「設定」をクリックします。

フォント設定10

設定の検索項目に「font」と入力するといくつかの設定項目が表示されます。この中の「Terminal › Integrated:」の項目がターミナルに関する設定項目です。
「Terminal › Integrated: Font Family」の項目でデフォルトは空になっています。

フォント設定10

今回は「’Meirio UI’, monospace」に設定しました。

フォント設定11

変更前後を比較するとフォントが変更されています。

フォント設定12
フォント設定13

ターミナルのフォントサイズを変更する

フォントサイズを変更するには先程と同様にフォント設定を表示して「Terminal › Integrated: Font Size」の項目を変更します。

フォント設定14

今回はフォントサイズを「18」に変更します。

フォント設定15

変更前後を比較するとフォントサイズが変更されていることが確認できます。

フォント設定16
フォント設定17

タブキー設定

エディターでタブキーを押したときにタブとして入力するか、スペースに変換して入力するかを選択することができます。またタブキーをスペース何文字分として扱うかも設定できます。ここではタブキーを押したときの動作に関する設定方法について解説します。

タブでスペースを挿入するかの設定

Visual Studio Codeのデフォルトの設定ではタブキーを押すとスペースに変換されて入力されます。(・・・・の・がスペース1文字分を表しています)
これをスペースではなくタブとして入力する設定に変更していきます。

タブキー設定1

設定を変更するには「ファイル」メニューから「ユーザー設定」を選択し、表示されたサブメニューの「設定」をクリックします。

タブキー設定2

設定の検索項目に「insert space」と入力するといくつかの設定項目が表示されます。この中の「Editor: Insert Spaces」の項目がタブキーを押した時にスペースとして挿入するかの設定項目です。

タブキー設定3

デフォルトはチェックが入っていますので、このチェックを外します。

タブキー設定4

これでタブとして入力されるように設定されました。

タブキー設定5

タブをスペース何文字分にするかの設定

フォントサイズを変更するには先程と同様に設定を表示して検索項目に「tabsize」と入力して「Editor:Tab Size」の項目を表示します。

タブキー設定6

デフォルトでは「4」になっていますので、今回は「8」に設定します。

タブキー設定7

これでタブキーを押すとスペース8個分が入力されます。

タブキー設定8

ステータスバーから現在の設定を確認、変更する

ステータスバーから現在開いているファイルの設定を確認、変更することも可能です。
ステータスバーに「スペース:8」と記載されている部分が現在の設定です。

タブキー設定9

カーソルを当てると指マークに変わりますのでクリックします。

タブキー設定10

画面上部に設定項目が表示されるため、タブによるインデントを選択します。

タブサイズの選択画面に変わるので、「4」を選択します。

タブキー設定11

スペース4文字分のタブに変更されます。

タブキー設定12

インデント方式を自動的に検出する

新しいファイルを作成した場合は、設定値に基づいてインデントの方式が決まりますが、既に作成されているファイルを開いた場合は、ファイルに保存されている設定値を自動的に読み取って、現在の設定を上書きします。
自動で既存の設定値を読み込むかの設定は「Editor: Detect Indentation」で設定できます。この設定にチェックが入っている場合は、インデント設定を自動的に読み込み、上書きします。

実際に確認してみます。
上図の設定で新規ファイルを作成すると、「タブのサイズ:4」で設定されていますが、スペース4で設定されたファイルを開くと「スペース:4」で開かれます。

タブキー設定13

「Editor: Detect Indentation」のチェックを外して再度既存のファイルを開くと「タブのサイズ:4」とユーザー設定の設定値に変更されます。

タブキー設定14
タブキー設定15

Proxy設定(認証あり)

Visual Studio Codeの会社などで認証が必要なプロキシ環境で利用する場合、Visual Studio Codeを起動するたびにプロキシの認証ダイアログが表示されてしまいます。このような場合には認証プロキシの設定が必要になり。
こちらの記事(Windowsシステムの環境変数を設定する)のように、プロキシを環境変数で設定している場合は、設定が継承されますのでVisual Studio Codeでの設定は不要になります。

プロキシを設定する

「ファイル」メニューから「ユーザー設定」を選択し、表示されたサブメニューの「設定」をクリックします。

Proxy設定1

設定の検索項目に「proxy」と入力してProxy設定項目を表示させます。
「Http:Proxy」と「Http:Proxy Strict SSL」を設定します。

Proxy設定2

「Http:Proxy」に「http://USER:PASS@Proxyアドレス:ポート番号」 を設定して、 「Http:Proxy Strict SSL」 のチェックを外します。

Proxy設定3

以上で設定は終了です。ダイアログが表示されないことを確認してください。

Visual Studio Codeのカスタマイズ方法について解説しました。

・関連記事:Visual Studio Codeのインストールと日本語化
・関連記事:Visual Studio Codeでプログラム作成・実行・デバッグを行う

スポンサーリンク
VS Code利用ガイド
スポンサーリンク
パイワーーク!