🚀 VS Code で で入手しましょう!

ターミナルの外観

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

An example of a custom UI, using Powerline and Nerd Font symbols in the prompt and a custom workbench theme

Sapphire テーマと、フォント Hack と Nerd Font シンボルを使用したカスタム Starship プロンプト

テキストスタイル

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

  • 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 つしかない場合は、ビューヘッダーにアクティブなターミナルが表示されます。

A blank terminal without tabs and then with tabs displayed for three terminals

可視性

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

  • 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 設定を構成することにより、ターミナルでリガチャを有効にできます。

Enabling ligatures will combine certain sets of characters into one, for example >= into the greater than or equals sign

フォント機能設定

リガチャが有効になっている場合、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) のサブセットが含まれます。これは、構成されたフォントがこれらの文字をサポートする必要がなく、文字をピクセルパーフェクトに描画し、セル全体のサイズに合わせてストレッチする必要があることを意味します。

以下は、カスタム行の高さと文字間隔が構成されたこれらの文字の例です。カスタムグリフのおかげで、セル間にギャップがないことに注意してください

Box drawing, block characters and some Powerline symbols fill the entire cell in the terminal

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

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

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

Starship や oh-my-posh などの一部のプロンプトは、git のステータスなどを表示し、ほとんどのシェルで動作するため、最初に始めるのに適した選択肢です。

よくある質問

ターミナルに多色の三角形または黒い長方形が表示されるのはなぜですか?

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

ターミナルで色が正しくないのはなぜですか?

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

"terminal.integrated.minimumContrastRatio": 1

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

04/03/2025