ターミナルの外観

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

Sapphireテーマと、Nerd Fontの記号を持つHackフォントを使用したカスタム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 Font

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

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

Nerd Fontも同様に機能し、通常は" NF"という接尾辞がつきます。以下は、HackのNerd Fontバリアントを設定する方法の例です。

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

ターミナルカーソル

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

• terminal.integrated.cursorStyle: カーソルの形状を定義します。block、line、underlineのいずれかを指定できます。
• terminal.integrated.cursorWidth: カーソルスタイルがlineに設定されている場合のカーソルの幅をピクセル単位で指定します。
• terminal.integrated.cursorBlinking: ターミナルがフォーカスされているときにカーソルを点滅させるかどうかを指定します。
• terminal.integrated.cursorStyleInactive: 非アクティブ時のカーソルの形状を定義します。outline、block、line、underline、noneのいずれかを指定できます。

タブのカスタマイズ

デフォルトでは、ターミナルが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

合字 (Ligatures)

ターミナルの合字を使用すると、複数の文字を1つとしてレンダリングできます。ターミナルのフォントファミリー (terminal.integrated.fontFamily) が合字をサポートしていれば、terminal.integrated.fontLigatures.enabled設定を構成することで、ターミナルで合字を有効にできます。

フォント機能の設定

合字が有効な場合、CSSのfont-feature-settingsプロパティの形式でフォント機能設定の詳細なリストを設定することも可能です。これにより、合字のレンダリング方法をより細かく制御できます。たとえば、標準の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でも同様のことが起こります。これらの問題を回避するには、codeを--disable-gpuフラグ付きで起動するか、terminal.integrated.gpuAccelerationをoffに設定してターミナルでのcanvasの使用を避けてください。詳細については、GPUアクセラレーションのセクションを参照してください。

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

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

"terminal.integrated.minimumContrastRatio": 1

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