ターミナルの外観

Visual Studio Code のターミナルの外観は、広範囲にカスタマイズできます。

カスタムの Starship プロンプトと Nerd Font のシンボルを使用するフォント Hack を組み合わせた Sapphire テーマ

テキストスタイル

ターミナルのテキストは、以下の設定でカスタマイズできます。

• terminal.integrated.fontFamily: 使用するフォントファミリー。これは、CSS の `fontFamily` が取る形式の文字列です。たとえば、`"'Fira Code', monospace"` は、プライマリフォントとして `Fira Code` を、グリフがない場合のフォールバックとして `monospace` を設定します。
• terminal.integrated.fontSize: ターミナル内のテキストのフォントサイズを変更します。
• terminal.integrated.letterSpacing: 文字間の水平方向の追加の間隔をピクセル単位で設定します。
• terminal.integrated.lineHeight: 通常の行の高さの乗数として、文字間の垂直方向の追加の間隔を設定します。たとえば、`1.1` は 10% の垂直方向のスペースを追加します。
• terminal.integrated.fontWeight: 「標準」テキストのフォントの太さを設定します。
• terminal.integrated.fontWeightBold: 「太字」テキストのフォントの太さを設定します。
• terminal.integrated.fontLigatures.*: 合字を設定します。

Powerline シンボルと Nerd Fonts

Powerline フォントは、ターミナルで使用できる追加の文字を含む特殊なパッチ適用済みフォントです。VS Code のターミナルは、フォントを設定しなくても一部の Powerline シンボルをレンダリングしますが、より多くのグリフが必要な場合は、フォントファミリー設定で Powerline フォントを設定します。Powerline フォントは通常 ` " for Powerline"` で終わります。以下の設定は、パッチ適用済みの DejaVu Sans Mono を設定する方法の例です。

"editor.fontFamily": "'DejaVu Sans Mono for Powerline'"

Nerd Fonts も同様に機能し、通常 ` " NF"` サフィックスが付きます。以下は、Hack の Nerd Fonts バリアントを設定する方法の例です。

"terminal.integrated.fontFamily": "'Hack NF'"

ターミナルのカーソル

ターミナルカーソルのスタイルと点滅するかどうかは、以下の設定でカスタマイズできます。

• terminal.integrated.cursorStyle: カーソルの形状を定義します。ブロック、ライン、またはアンダーラインにできます。
• terminal.integrated.cursorWidth: カーソルスタイルが `line` に設定されている場合のカーソルの幅をピクセル単位で指定します。
• terminal.integrated.cursorBlinking: ターミナルがフォーカスされているときにカーソルが点滅するかどうか。
• terminal.integrated.cursorStyleInactive: カーソルの形状を定義します。アウトライン、ブロック、ライン、アンダーライン、またはなしにできます。

タブのカスタマイズ

ターミナルタブは、デフォルトではターミナルビューの右側に2つ以上のターミナルがある場合に表示され、1つしかない場合はアクティブなターミナルがビューヘッダーに表示されます。

可視性

デフォルトの可視性は水平スペースを節約するように設計されていますが、望ましくない場合があります。タブの表示方法は以下の設定で構成できます。

• terminal.integrated.tabs.hideCondition: 右側のタブを非表示にする条件。常に表示するには `never` に設定します。
• terminal.integrated.tabs.showActiveTerminal: アクティブなターミナルをターミナルビューヘッダーに表示する条件。
• terminal.integrated.tabs.showActions: アクティブなターミナルのアクションをビューヘッダーに表示する条件。
• terminal.integrated.tabs.location: タブをターミナルの左側または右側に表示するかどうか。
• terminal.integrated.tabs.enabled: タブを使用するかどうか。無効にすると、元のドロップダウンビューが表示されます。

タブのテキスト

各タブのテキストは以下の設定によって決定されます。

• terminal.integrated.tabs.title: タブのタイトル。
• terminal.integrated.tabs.description: タイトルの右側に表示されるテキスト。
• terminal.integrated.tabs.separator: タイトルと説明の間の区切り文字。

デフォルトでは、タイトルはシェルの検出されたプロセス名を表示します。

他のターミナルでは、シェルによって送信されたエスケープシーケンスをタイトルとして表示することがよくあります。これは次のように設定できます。

"terminal.integrated.tabs.title": "${sequence}"

使用可能な変数は次のとおりです。

• ${cwd}: ターミナルの現在の作業ディレクトリ。
• ${cwdFolder}: ターミナルの現在の作業ディレクトリで、マルチルートワークスペースの場合、またはシングルルートワークスペースで初期作業ディレクトリと値が異なる場合に表示されます。Windows では、シェル統合が有効になっている場合にのみ表示されます。
• ${workspaceFolder}: ターミナルが起動されたワークスペース。
• ${workspaceFolderName}: ターミナルが起動されたワークスペースの名前。
• ${local}: リモートワークスペースにおけるローカルターミナルを示します。
• ${process}: ターミナルプロセスの名前。
• ${progress}: OSC `9;4` シーケンスによって報告される進捗状況。
• ${separator}: 値を持つ変数または静的テキストに囲まれている場合にのみ表示される条件付き区切り文字 (-)。
• ${sequence}: プロセスによってターミナルに提供された名前。
• ${task}: このターミナルがタスクに関連付けられていることを示します。
• ${shellType}: 検出されたシェルタイプ。
• ${shellCommand}: シェル統合に従って実行されているコマンド。これは、検出されたコマンドラインの高い信頼性も必要とし、一部のプロンプトフレームワークでは機能しない場合があります。
• ${shellPromptInput}: シェル統合に従ったシェルの完全なプロンプト入力。

アイコン

各ターミナルには、ターミナルプロファイルによって決定される関連アイコンがあります。プロファイルで定義されていない場合に使用されるデフォルトのアイコンとその色は、terminal.integrated.tabs.defaultIcon および terminal.integrated.tabs.defaultColor の設定で構成できます。

ステータス

ターミナルの「ステータス」は、もしあればタブの右側に表示されるアイコンで示されます。一部のステータスにはアニメーションが伴います。これが邪魔になる場合は、アニメーションを無効にできます。

"terminal.integrated.tabs.enableAnimation": false

視覚的なベル

ターミナルのベルがトリガーされると、黄色いベルのアイコンが短く表示されます。これは terminal.integrated.enableBell で無効にでき、期間は terminal.integrated.bellDuration で設定できます。

ターミナルの色

ターミナルはトゥルーカラーを表示できますが、プログラムは一般的に8つのANSIカラー（黒、赤、緑、黄、青、マゼンタ、シアン、白）とその明るいバリアントを使用します。これらのANSIカラーはアクティブなカラーテーマによって決定されますが、workbench.colorCustomizations設定を使用してテーマとは独立して構成することもできます。

太字のテキストが通常のANSIカラーを使用するか、明るいバリアントを使用するかは、terminal.integrated.drawBoldTextInBrightColors 設定で構成できます。

最小コントラスト比

ターミナルでは、ダーク/ライトテーマ、ANSI カラー、実行中のシェル/プログラムなどとの競合により、コントラストの問題が発生することがよくあります。

最小コントラスト比機能は、テキストの前景色の輝度を増減させて 4.5:1 のコントラスト比を満たすことでこの問題を解決します。

これの欠点の1つは、色付きテキストが彩度を失う場合があることです。この機能は、元の色を得るために設定または無効にすることができます。

"terminal.integrated.minimumContrastRatio": 1

合字（リガチャ）

ターミナルの合字（リガチャ）により、複数の文字を1つの文字としてレンダリングできます。ターミナルフォントファミリー（terminal.integrated.fontFamily）がサポートしている場合、terminal.integrated.fontLigatures.enabled 設定を構成することで、ターミナルで合字を有効にできます。

フォント機能設定

合字が有効になっている場合、`font-feature-settings` CSS プロパティの形式で、フォント機能設定の詳細なリストを設定することも可能です。これにより、合字がどのようにレンダリングされるかをより細かく制御できます。例えば、標準の `calt` 合字を無効にし、特定のフォントバリアントを有効にするには、`"calt" off, "ss03"` のようになります。フォントがサポートするバリアントのリストについては、フォントのドキュメントを参照してください。

フォールバック合字

フォントが合字をサポートしているものの、VS Code がそのフォントの解析をサポートしていない場合、GPU アクセラレーションを無効にするか、合字を作成するために手動で結合する文字シーケンスのリストを指定できます。

デフォルトでは、フォールバック合字はコーディングでよく使用される一般的な合字のリストです。terminal.integrated.fontLigatures.fallbackLigatures 設定を構成してリストを微調整できます。例：

// Only use ligatures for `ff`, `fi` and `fl`
"terminal.integrated.fontLigatures.fallbackLigatures": [
    "ff",
    "fi",
    "fl"
]

GPU アクセラレーション

ターミナルには、それぞれ異なるトレードオフを持つ2つの異なるレンダラーがあります。

• WebGL レンダラー - 真の GPU アクセラレーション。
• DOM レンダラー - はるかに遅いですが、互換性に優れたフォールバックレンダラー。

WebGL レンダラーによる GPU アクセラレーションは、ターミナルでデフォルトで有効になっています。これにより、CPU が各フレームのレンダリングに費やす時間を大幅に削減することで、ターミナルが高速に動作し、高 FPS で表示されるようになります。

デフォルトの terminal.integrated.gpuAcceleration の値 `auto` は WebGL レンダラーを試行し、失敗した場合は DOM レンダラーにフォールバックします。Linux VM、WebGL をサポートしていないブラウザ、または古いドライバを搭載したマシンでは、WebGL が正しく機能しない場合があります。

カスタムグリフ

GPU アクセラレーションが有効な場合、フォントではなくカスタムレンダリングにより、一部の文字がターミナルでどのように表示されるかが向上します。これには、ボックス描画文字（`U+2500-U+257F`）、ブロック要素（`U+2580-U+259F`）、およびPowerlineシンボルの一部（`U+E0B0-U+E0BF`）が含まれます。これは、設定されたフォントがこれらの文字をサポートする必要がないこと、および文字がピクセルパーフェクトに描画され、セル全体のサイズに拡大されることを意味します。

以下は、カスタムの行の高さと文字間隔が設定されたこれらの文字の例です。カスタムグリフのおかげで、セル間に隙間がないことに注目してください。

この機能は、terminal.integrated.customGlyphs を `false` に設定することで無効にできます。

曖昧な幅のグリフのスケーリング

一部の Unicode 文字は、ターミナルのバックエンドとフロントエンドでサイズが一致しない曖昧な幅を持っています。GPU アクセラレーションが有効でこの曖昧さが発生した場合、グリフは単一のセルに収まるように水平方向に再スケーリングされ、重なりを防ぎます。

たとえば、下の画像では、ローマ数字の文字が単一のセルに押し込められています。

この機能は、terminal.integrated.rescaleOverlappingGlyphs を `false` に設定することで無効にでき、その結果、以下の重なり合ったレンダリングになります。

プロンプトのカスタマイズ

ほとんどのシェルでは、ターミナルプロンプトを広範囲にカスタマイズできます。これは、通常 `$PS1` 変数を変更したり、`$PROMPT_COMMAND` を設定したり、プラグインをインストールしたりすることで、VS Code の外部でシェルを設定して行われます。

Starship や oh-my-posh のようなプロンプトは、Git のステータスなどを表示し、ほとんどのシェルで動作するため、使い始めには良い選択です。

よくある質問

なぜ私のターミナルは多色の三角形や黒い四角形を表示するのですか？

ターミナルは、一部の環境で GPU アクセラレーションによるレンダリングに問題がある場合があります。例えば、テキストの代わりに大きな多色の三角形が表示されることがあります。これは通常、ドライバや VM のグラフィックの問題によって引き起こされ、Chromium でも同様の現象が発生します。これらの問題を回避するには、`--disable-gpu` フラグを付けて `code` を起動するか、terminal.integrated.gpuAcceleration を `off` に設定して、ターミナルでキャンバスを使用しないようにします。詳細については、GPU アクセラレーションのセクションを参照してください。

なぜターミナルの色がおかしいのですか？

最小コントラスト比機能により、色が期待どおりに表示されない場合があります。これは無効にできます。

"terminal.integrated.minimumContrastRatio": 1

これがデフォルトである理由の背景は、vscode#146406 で説明されています。