終端機外觀

Visual Studio Code 的終端機外觀可以進行深度自訂。

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

Sapphire 主題,搭配使用 Starship 自訂提示字元,字型為 Hack 並使用了 Nerd Font 符號

文字樣式

終端機中的文字可以透過以下設定進行自訂

  • terminal.integrated.fontFamily 在 VS Code 中開啟 在 VS Code Insiders 中開啟 :要使用的字型家族,此處接受與 CSS 中 fontFamily 格式相同的字串。例如,"'Fira Code', monospace" 將會設定 Fira Code 作為主要字型,當字型缺乏字元時,則會以 monospace 作為後備字型。
  • terminal.integrated.fontSize 在 VS Code 中開啟 在 VS Code Insiders 中開啟 :變更終端機文字的字型大小。
  • terminal.integrated.letterSpacing 在 VS Code 中開啟 在 VS Code Insiders 中開啟 :設定字元之間的額外水平間距(以像素為單位)。
  • terminal.integrated.lineHeight 在 VS Code 中開啟 在 VS Code Insiders 中開啟 :設定字元之間的額外垂直間距,為標準行高的乘數。例如,1.1 將會增加 10% 的額外垂直空間。
  • terminal.integrated.fontWeight 在 VS Code 中開啟 在 VS Code Insiders 中開啟 :設定「一般」文字的字型粗細。
  • terminal.integrated.fontWeightBold 在 VS Code 中開啟 在 VS Code Insiders 中開啟 :設定「粗體」文字的字型粗細。
  • 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 Font 變體的範例

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

終端機游標

終端機游標樣式以及是否閃爍,可以透過以下設定進行自訂

  • terminal.integrated.cursorStyle 在 VS Code 中開啟 在 VS Code Insiders 中開啟 :定義游標形狀,可選 block(方塊)、line(直線)或 underline(底線)。
  • terminal.integrated.cursorWidth 在 VS Code 中開啟 在 VS Code Insiders 中開啟 :當游標樣式設為 line 時,游標的寬度(以像素為單位)。
  • terminal.integrated.cursorBlinking 在 VS Code 中開啟 在 VS Code Insiders 中開啟 :終端機處於焦點時,游標是否應閃爍。
  • terminal.integrated.cursorStyleInactive 在 VS Code 中開啟 在 VS Code Insiders 中開啟 :定義處於非啟用狀態時的游標形狀,可選 outline(外框)、block(方塊)、line(直線)、underline(底線)或 none(無)。

自訂索引標籤 (Tabs)

預設情況下,當有兩個或多個終端機時,終端機索引標籤會出現在終端機檢視的右側;當只有一個終端機時,則會在檢視標題中顯示當前的終端機。

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

可見度

預設的可見度設計旨在節省水平空間,但未必符合每個人需求。索引標籤的呈現方式可以透過以下設定進行配置

  • terminal.integrated.tabs.hideCondition 在 VS Code 中開啟 在 VS Code Insiders 中開啟 :何時隱藏右側的索引標籤,設為 never 則會總是顯示它們。
  • terminal.integrated.tabs.showActiveTerminal 在 VS Code 中開啟 在 VS Code Insiders 中開啟 :何時在終端機檢視標題中顯示當前的終端機。
  • terminal.integrated.tabs.showActions 在 VS Code 中開啟 在 VS Code Insiders 中開啟 :何時在檢視標題中顯示當前終端機的操作選項。
  • terminal.integrated.tabs.location 在 VS Code 中開啟 在 VS Code Insiders 中開啟 :索引標籤應顯示在終端機的左側還是右側。
  • terminal.integrated.tabs.enabled 在 VS Code 中開啟 在 VS Code Insiders 中開啟 :是否使用索引標籤,停用此選項將會顯示原始的下拉選單檢視。

索引標籤文字

每個索引標籤上的文字取決於以下設定

  • terminal.integrated.tabs.title 在 VS Code 中開啟 在 VS Code Insiders 中開啟 :索引標籤標題。
  • terminal.integrated.tabs.description 在 VS Code 中開啟 在 VS Code Insiders 中開啟 :顯示在標題右側的文字。
  • terminal.integrated.tabs.separator 在 VS Code 中開啟 在 VS Code Insiders 中開啟 :標題與描述之間的分隔符號。

預設情況下,標題會顯示 Shell 所偵測到的處理程序名稱。

其他終端機通常會將 Shell 發送的轉義序列(Escape Sequence)顯示為標題,這可以透過以下設定來配置

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

以下為所有可用的變數

  • ${cwd}:終端機目前的運作目錄。
  • ${cwdFolder}:終端機目前的運作目錄,在多根工作區(multi-root workspaces)中顯示,或在單根工作區中,當該值與初始運作目錄不同時顯示。在 Windows 上,此設定僅在啟用 Shell 整合時才會顯示。
  • ${workspaceFolder}:啟動終端機時所在的工作區。
  • ${workspaceFolderName}:啟動終端機時所在的工作區名稱。
  • ${local}:表示遠端工作區中的本機終端機。
  • ${process}:終端機處理程序的名稱。
  • ${progress}:由 OSC 9;4 序列所回報的進度狀態。
  • ${separator}:條件式分隔符號 (-),僅在兩側都有數值變數或靜態文字時顯示。
  • ${sequence}:處理程序提供給終端機的名稱。
  • ${task}:表示此終端機與某項任務(Task)相關聯。
  • ${shellType}:偵測到的 Shell 類型。
  • ${shellCommand}:根據 Shell 整合所執行的命令。這需要對偵測到的命令列有高度信心,在某些提示字元架構中可能無法正常運作。
  • ${shellPromptInput}:根據 Shell 整合,Shell 的完整提示字元輸入。

圖示

每個終端機都有一個關聯圖示,該圖示由其 終端機設定檔 (Terminal Profile) 決定。若設定檔中未定義,則會使用預設圖示及其顏色,您可以透過 terminal.integrated.tabs.defaultIcon 在 VS Code 中開啟 在 VS Code Insiders 中開啟 terminal.integrated.tabs.defaultColor 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定來進行配置。

狀態

終端機的「狀態」(如果有的話)由出現在索引標籤右側的圖示表示。某些狀態會包含動畫,如果這造成干擾,可以透過設定停用動畫。

"terminal.integrated.tabs.enableAnimation": false

視覺鈴聲 (Visual Bell)

當終端機的鈴聲(Bell)觸發時,會短暫顯示一個黃色的鈴鐺圖示。此功能可以透過 terminal.integrated.enableBell 在 VS Code 中開啟 在 VS Code Insiders 中開啟 停用,持續時間則可透過 terminal.integrated.bellDuration 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定。

終端機色彩

雖然終端機具備顯示全彩(True Color)的能力,但程式通常使用 8 種 ANSI 色彩(黑、紅、綠、黃、藍、紫、青、白)及其亮色變體。這些 ANSI 色彩由啟用的 色彩主題 (Color Theme) 決定,但也可以透過 workbench.colorCustomizations 設定,從主題中獨立配置。

粗體文字是否使用標準 ANSI 色彩或其亮色變體,可以透過 terminal.integrated.drawBoldTextInBrightColors 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定進行配置。

最小對比度

由於深/淺色主題、ANSI 色彩或正在執行的 Shell/程式之間的衝突,終端機通常會遇到對比度問題。

「最小對比度 (Minimum contrast ratio)」功能透過增加或減少文字前景顏色的亮度,直到達到 4.5:1 的對比度標準,解決了此問題。

此功能的一個缺點是彩色文字有時會失去部分飽和度。此功能可以進行設定,或為獲得原始顏色而將其停用。

"terminal.integrated.minimumContrastRatio": 1

連字 (Ligatures)

終端機的 連字 (Ligatures) 允許將多個字元渲染為一個。只要終端機字型家族( terminal.integrated.fontFamily 在 VS Code 中開啟 在 VS Code Insiders 中開啟 )支援,您可以透過 terminal.integrated.fontLigatures.enabled 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定來啟用終端機連字。

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

字型特性設定

啟用連字時,也可以設定詳細的字型特性清單,格式為 CSS 屬性 font-feature-settings。這讓您可以更細緻地控制連字的渲染方式。例如,停用標準 calt 連字並啟用特定字型變體,看起來會像 "calt" off, "ss03"。有關字型支援的變體列表,請參閱該字型的文件。

後備連字

當字型支援連字但 VS Code 無法解析該字型時,您可以選擇停用 GPU 加速,或指定一個字元序列清單來手動連接以形成連字。

預設情況下,後備連字是程式設計中常用連字的列表。您可以透過設定 terminal.integrated.fontLigatures.fallbackLigatures 在 VS Code 中開啟 在 VS Code Insiders 中開啟 來微調清單。例如:

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

GPU 加速

終端機提供兩種不同的渲染器,每種都有不同的取捨:

  • WebGL 渲染器 - 真實的 GPU 加速。
  • DOM 渲染器 - 一種後備渲染器,速度較慢,但具有絕佳的相容性。

由 WebGL 渲染器驅動的 GPU 加速在終端機中預設為啟用。這能透過顯著減少 CPU 渲染每一幀的時間,來協助終端機運作得更快並顯示更高的 FPS。

terminal.integrated.gpuAcceleration 在 VS Code 中開啟 在 VS Code Insiders 中開啟 的預設值為 auto,會嘗試使用 WebGL 渲染器,如果失敗則會回退到 DOM 渲染器。在 Linux 虛擬機、不支援 WebGL 的瀏覽器,或使用過時驅動程式的機器上,WebGL 可能無法正常運作。

自訂字形 (Custom Glyphs)

當啟用 GPU 加速 時,自訂渲染(而非使用字型檔)可以改善某些字元在終端機中的顯示效果。以下 Unicode 範圍受到支援:

  • 方框繪圖 (Box Drawing) (U+2500-U+257F)
  • 區塊元素 (Block Elements) (U+2580-U+259F)
  • 盲文點字圖案 (Braille Patterns) (U+2800-U+28FF)
  • Powerline 符號 (U+E0A0-U+E0D4, 私人使用區)
  • 進度指示器 (Progress Indicators) (U+EE00-U+EE0B, 私人使用區)
  • Git 分支符號 (Git Branch Symbols) (U+F5D0-U+F60D, 私人使用區)
  • 舊式計算符號 (Symbols for Legacy Computing) (U+1FB00-U+1FBFF)

這也意味著配置的字型不需要包含這些字元,且它們會以像素級完美的品質進行繪製,並在適當的情況下延伸至整個儲存格的大小。

下方為上述範圍內所有支援的約 800 個字元

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

此功能可透過將 terminal.integrated.customGlyphs 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設為 false 來停用。

重新調整歧義寬度字形 (Rescaling ambiguous width glyphs)

某些 Unicode 字元具有歧義寬度(Ambiguous width),終端機後端與前端對於大小的定義可能不一致。當啟用 GPU 加速 且發生這種歧義時,該字形將會在水平方向上重新調整大小,以適應單一儲存格並防止重疊。

例如,下圖顯示了被壓縮到單一儲存格中的羅馬數字字元

VIII and XII characters would be rescaled horizontally so as to not overlap with following characters. They feature a thinner stroke width when this happens due to the scaling

此功能可透過將 terminal.integrated.rescaleOverlappingGlyphs 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設為 false 來停用,這將會導致以下出現重疊的渲染效果

When off, the VIII and XII characters may overlap the following characters

自訂您的提示字元 (Prompt)

大多數 Shell 都允許對終端機提示字元進行深度自訂。這是透過在 VS Code 之外配置 Shell 來完成的,通常是修改 $PS1 變數、設定 $PROMPT_COMMAND 或安裝外掛程式。

某些像 Starshipoh-my-posh 的提示字元會顯示如 Git 狀態等資訊,且適用於大多數 Shell,因此初學者可以優先考慮這些選擇。

常見問題

為什麼我的終端機顯示出多色三角形或黑色矩形?

終端機在某些環境下可能會遇到 GPU 加速渲染的問題。例如,您可能會看到一個巨大的多色三角形而不是文字。這通常是由驅動程式/虛擬機圖形問題所引起,同樣的情況也會發生在 Chromium 中。您可以透過使用 --disable-gpu 旗標啟動 code,或將 terminal.integrated.gpuAcceleration 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設為 off 來繞過這些問題,以避免在終端機中使用畫布(Canvas)。詳情請參閱 GPU 加速 章節。

為什麼終端機中的顏色不正確?

最小對比度功能 可能會導致顏色顯示不如預期。它可以透過以下方式停用:

"terminal.integrated.minimumContrastRatio": 1

關於為何這是預設行為的背景說明,請參閱 vscode#146406

© . This site is unofficial and not affiliated with Microsoft.