如何自訂 Visual Studio Code 終端機的外觀和樣式

Visual Studio Code 終端機的外觀和樣式

通過編輯 Visual Studio Code 中的設定項，你可以調整終端機的外觀和樣式，比如，字型大小和色彩。當然，設定項可以在設定檔案settings.json中編輯，或在設定面板中編輯。

自訂 Visual Studio Code 終端機的文字樣式

VSCode 終端機設定字型家族、大小、色彩、行高等文字樣式

影片示範 YouTube

設定項terminal.integrated.fontFamily的值是一個字串，可用於設定終端機的字型家族，其格式類似於 CSS 的font-family屬性，可以包含多個使用,分隔的字型名稱，如果字型名稱包含空格，那麽需要使用單引號'將其括住，比如'Source Code Pro',Consolas。

設定項terminal.integrated.fontSize的值是一個數值，比如24，可用於設定終端機的字型大小（以像素為單位）。需要指出，雖然設定項terminal.integrated.fontSize預期為一個數值，但他可被設定為符合 CSS 規格的字串，比如"20px"。

設定項terminal.integrated.fontWeight的值是一個數值或字串，比如，"100"，200，"bold"，"normal"，類似於 CSS 的font-weight屬性，可用於設定終端機中非粗體文字的字型粗細。如果使用數值或表示數值的字串來設定字型粗細（需要字型支援），那麽對應的數值應在1和1000之間。

設定項terminal.integrated.fontWeightBold與設定項terminal.integrated.fontWeight類似，只不過，terminal.integrated.fontWeightBold用於設定終端機中的粗體文字的字型粗細。

設定項terminal.integrated.letterSpacing的值是一個數值，比如5，可用於設定終端機中文字字元之間的額外水平間距（以像素為單位）。

設定項terminal.integrated.lineHeight的值是一個數值，表示正常行高的倍數，比如1.2，可用於設定終端機中多行文字之間的行高。

{
	// 字型家族為 Courier New
	"terminal.integrated.fontFamily": "Courier New",
	// 字型小大為 24 像素
	"terminal.integrated.fontSize": 24,
	// 非粗體文字的字型粗細為 600
	"terminal.integrated.fontWeight": 600,
	// 粗體文字的字型粗細為 normal
	"terminal.integrated.fontWeightBold": "normal",
	// 字元之間的額外間距為 5 像素
	"terminal.integrated.letterSpacing": 5,
	// 多行文字之間的行高為正常行高的 1.2 倍
	"terminal.integrated.lineHeight": 1.2,
}

設定是否為 Visual Studio Code 終端機中的特殊字元啟用自訂字形

設定項terminal.integrated.customGlyphs的值是一個布林值，可用於設定終端機是否為一些特殊字元啟用自訂字形，這意味著並不需要使用字型來繪製這些字元，如果為false（預設值為true）則采用字型繪製字元。

{
	// 為一些特殊字元啟用自訂字形
	"terminal.integrated.customGlyphs": true,
}

# PowerShell
echo "`u{2500}`u{2501}`u{2502}"
─━│

自訂 Visual Studio Code 終端機的色彩

VSCode 自訂終端機色彩（前景、背景、相符項目、醒目提示、ANSI）

影片示範 YouTube

如果終端機所啟動的命令列應用（殼層程式）支援，那麽你可以通過 Visual Studio Code 設定項workbench.colorCustomizations來設定命令列應用的相關色彩。當然，這些色彩可能已經被目前的色彩主題指定。

設定項workbench.colorCustomizations是一個物件，可以在該物件中新增以下屬性（設定項）來設定終端機的某些色彩，其中屬性的值是表示色彩的字串，色彩的格式與 CSS 中的色彩的格式類似，但應盡量將其書寫為#RGB，#RGBA，#RRGGBB，#RRGGBBAA，或者書寫為default來使用預設色彩。

foreground，background，dropBackground，border，tab.activeBorder

terminal.foreground和terminal.background屬性用於設定終端機的前景（文字）色彩和背景色彩。terminal.dropBackground屬性用於設定在作為拖放目標時終端機的背景色彩（需要擁有透明度，以防止遮蓋文字）。terminal.border屬性用於設定終端機中的分割窗格的邊線色彩，預設為設定項panel.border的值。

selectionForeground，selectionBackground，inactiveSelectionBackground

terminal.selectionForeground和terminal.selectionBackground屬性用於設定終端機中選取內容的前景（文字）色彩和背景色彩。terminal.inactiveSelectionBackground屬性用於設定在非活動終端機中選取的內容的背景色彩。

hoverHighlightBackground

terminal.hoverHighlightBackground屬性用於設定滑鼠暫留時終端機中醒目提示內容的背景色彩（需要擁有透明度，以防止遮蓋文字）。

一些命令列應用會輸出一些需要醒目提示的內容，比如 PowerShell 可能將資料夾醒目提示。

terminalCursor

terminalCursor.foreground屬性用於設定終端機的遊標色彩，terminalCursor.background屬性用於設定被終端機的塊狀遊標遮住的內容的色彩。

terminalOverviewRuler

terminalOverviewRuler.border屬性用於設定終端機的概觀標尺的邊線色彩，terminalOverviewRuler.cursorForeground和terminalOverviewRuler.findMatchForeground屬性用於設定遊標和尋找相符項目在終端機的概觀標尺中的色彩。

概觀標尺顯示在終端機的捲軸區域中，用於展示命令列應用中的某些內容，比如遊標位置或執行過的命令。

findMatchBackground，findMatchBorder，findMatchHighlightBackground，findMatchHighlightBorder

terminal.findMatchBackground和terminal.findMatchBorder屬性用於設定終端機中目前尋找相符項目的背景色彩（需要擁有透明度，以防止遮蓋文字）和邊線色彩，terminal.findMatchHighlightBackground和terminal.findMatchHighlightBorder屬性用於設定終端機中非目前尋找相符項目的背景色彩（需要擁有透明度，以防止遮蓋文字）和邊線色彩。

terminalCommandDecoration

terminalCommandDecoration.defaultBackground，terminalCommandDecoration.successBackground和terminalCommandDecoration.errorBackground屬性用於設定終端機中命令修飾的預設色彩，執行成功的命令修飾的色彩，執行失敗的命令修飾的色彩。

如果命令列應用支援，命令修飾可以為已執行的命令提供操作功能表。

terminalStickyScroll

terminalStickyScroll.background和terminalStickyScroll.border屬性用於設定終端機的自黏捲動覆蓋區的背景色彩和邊線色彩，terminalStickyScrollHover.background屬性用於設定滑鼠暫留時終端機的自黏捲動覆蓋區的背景色彩。

tab.activeBorder

terminal.tab.activeBorder屬性用於設定終端機面板右邊區域中的活動命令列應用索引標簽的邊線（預設為左邊線）色彩，預設為設定項tab.activeBorder的值。

terminalCommandGuide

terminalCommandGuide.foreground屬性用於設定終端機中命令指南的色彩。

ansi<Color>

terminalCommandGuide.ansi<Color>屬性用於設定終端機中的 ANSI 色彩，比如terminal.ansiBlack，terminal.ansiRed，通過這些屬性，你可以將 ANSI 的任意色彩顯示為其他色彩。

{
	"workbench.colorCustomizations": {
		// 前景色彩
		"terminal.foreground": "#eee",
		// 背景色彩
		"terminal.background": "#111",
		// 作為拖放目標時的背景色彩
		"terminal.dropBackground": "#00FF0033",
		// 分割窗格的邊線色彩
		"terminal.border": "#fff",
		// 選取內容的前景色彩
		"terminal.selectionForeground": "#FFF",
		// 選取內容的背景色彩
		"terminal.selectionBackground": "#239484",
		// 活動終端機中選取內容的背景色彩
		"terminal.inactiveSelectionBackground": "#6483ac",
		// 暫留時醒目提示內容的背景色彩
		"terminal.hoverHighlightBackground": "#79797999",
		// 遊標的色彩
		"terminalCursor.foreground": "#beeb6b",
		// 被塊狀遊標遮住的內容的色彩
		"terminalCursor.background": "#278ef6",
		// 概觀標尺的邊線色彩
		"terminalOverviewRuler.border": "#ff0000",
		// 遊標在概觀標尺中的色彩
		"terminalOverviewRuler.cursorForeground": "#c8c211",
		// 尋找相符項目在概觀標尺中的色彩
		"terminalOverviewRuler.findMatchForeground": "#1aff00",
		// 目前尋找相符項目的背景色彩
		"terminal.findMatchBackground": "#0f57f333",
		// 目前尋找相符項目的邊線色彩
		"terminal.findMatchBorder": "#ff6600",
		// 非目前尋找相符項目的背景色彩
		"terminal.findMatchHighlightBackground": "#ff660033",
		// 非目前尋找相符項目的邊線色彩
		"terminal.findMatchHighlightBorder": "#0f57f3",
		// 預設命令修飾的背景色彩
		"terminalCommandDecoration.defaultBackground": "#b5b5b5",
		// 執行成功的命令修飾的背景色彩
		"terminalCommandDecoration.successBackground": "#007c13",
		// 執行錯誤的命令修飾的背景色彩
		"terminalCommandDecoration.errorBackground": "#760000",
		// 自黏捲動覆蓋層的背景色彩
		"terminalStickyScroll.background": "#004d3f",
		// 自黏捲動覆蓋層的邊線色彩
		"terminalStickyScroll.border": "#00ceb2",
		// 暫留時自黏捲動覆蓋層的背景色彩
		"terminalStickyScrollHover.background": "#00886f",
		// 右邊區域的活動索引標簽的邊線色彩
		"terminal.tab.activeBorder": "#8491fb",
		// 命令指南的色彩
		"terminalCommandGuide.foreground": "#ece639",
		// ANSI 色彩 Black
		"terminal.ansiBlack": "#111",
		// ANSI 色彩 Red
		"terminal.ansiRed": "#aa0000",
	},
}

設定項terminal.integrated.drawBoldTextInBrightColors的值是一個布林值，可用於設定終端機中的粗體文字是否采用明亮 ANSI 色彩，其預設值為true，這會使采用粗體顯示的文字更加明亮。

設定項terminal.integrated.minimumContrastRatio的值是一個數值，可用於設定終端機的前景色彩的最小對比度（預設值為4.5）。如果該設定項小於等於1，則表示沒有任何對比度的修改，如果該設定項大於等於21，則表示使用最大對比度，這會消除一些由於色彩主題而導致的問題。

{
	// 粗體文字不采用明亮 ANSI 色彩
	"terminal.integrated.drawBoldTextInBrightColors": false,
	// 前景色彩的最小對比度
	"terminal.integrated.minimumContrastRatio": 10,
}

自訂 Visual Studio Code 終端機的遊標樣式

VSCode 自訂終端機遊標的形狀、寬度、色彩，以及是否閃爍

影片示範 YouTube

設定項terminal.integrated.cursorStyle可用於設定在獲得焦點時終端機的遊標形狀，其有效值可以是以下之一，block（塊狀，預設值），line（線狀），underline（底線）。

設定項terminal.integrated.cursorStyleInactive可用於設定在未獲得焦點時終端機的遊標形狀，其有效值可以是以下之一，block（塊狀），line（線狀），underline（底線），outline（輪廓，預設值），none（不顯示遊標）。

設定項terminal.integrated.cursorWidth的值是一個數值，比如10，可用於設定終端機的遊標寬度，無論是否擁有焦點，該設定項僅在遊標形狀為線狀時有效。

設定項terminal.integrated.cursorBlinking的值是一個布林值，可用於設定終端機的遊標是否閃爍，如果為true（預設值為false），則遊標自動閃爍。

{
	// 獲得焦點時的遊標形狀為塊狀
	"terminal.integrated.cursorStyle": "block",
	// 未獲得焦點時的遊標形狀為線狀
	"terminal.integrated.cursorStyleInactive": "line",
	// 遊標寬度為 10，僅在形狀為線狀時有效
	"terminal.integrated.cursorWidth": 10,
	// 遊標閃爍
	"terminal.integrated.cursorBlinking": true,
}

自訂 Visual Studio Code 終端機的索引標簽顯示方式

設定項terminal.integrated.tabs.hideCondition是一個字串，用於設定隱藏終端機右邊區域的索引標簽的條件，他擁有以下有效取值。

singleTerminal

singleTerminal（預設值）表示當終端機面板中僅有一個命令列應用時，右邊區域的索引標簽將被隱藏。

singleGroup

singleGroup表示當終端機面板中僅有一個命令列應用或命令列組時，右邊區域的索引標簽將被隱藏。

never

never表示將一直在終端機面板中顯示索引標簽。

設定項terminal.integrated.tabs.location是一個字串，用於設定終端機右邊區域的索引標簽的顯示位置，他擁有以下有效取值，left（左邊），right（預設值，右邊）。

設定項terminal.integrated.tabs.enabled是一個布林值，用於設定是否啟用終端機右邊區域的索引標簽，如果為false（預設值為true），則將采用清單方塊來顯示終端機面板中的命令列應用。

設定項terminal.integrated.tabs.showActiveTerminal是一個字串，用於設定終端機右上角的命令列資訊的顯示方式，他擁有以下有效取值。

singleTerminalOrNarrow

singleTerminalOrNarrow（預設值）表示當終端機面板中僅有一個命令列應用或命令列組時，或索引標簽過於狹窄使得文字無法顯示時，右上角的命令列資訊將被顯示。

singleTerminal

singleTerminal表示當終端機面板中僅有一個命令列應用或命令列組時，右上角的命令列資訊將被顯示。

always

always表示總是顯示命令列資訊。

never

never表示不顯示命令列資訊。

設定項terminal.integrated.tabs.showActions是一個字串，用於設定終端機右上角的分割按鈕和終止按鈕的顯示方式，他擁有以下有效取值。

singleTerminalOrNarrow

singleTerminalOrNarrow（預設值）表示當終端機面板中僅有一個命令列應用或命令列組時，或索引標簽過於狹窄使得文字無法顯示時，右上角的分割按鈕和終止按鈕將被顯示。

singleTerminal

singleTerminal表示當終端機面板中僅有一個命令列應用或命令列組時，右上角的分割按鈕和終止按鈕將被顯示。

always

always表示總是顯示分割按鈕和終止按鈕。

never

never表示不顯示分割按鈕和終止按鈕。

設定項terminal.integrated.tabs.enableAnimation是一個布林值，用於設定終端機所啟動的命令列應用的狀態是否擁有動畫效果，預設為true，擁有動畫效果。

{
	// 僅有一個命令列或命令列組時隱藏索引標簽
	"terminal.integrated.tabs.hideCondition": "singleGroup",
	// 索引標簽顯示在左邊
	"terminal.integrated.tabs.location": "left",
	// 使用清單方塊代替索引標簽
	"terminal.integrated.tabs.enabled": true,
	// 總是顯示命令列資訊
	"terminal.integrated.tabs.showActiveTerminal": "always",
	// 僅有一個命令列或命令列組時顯示分割和終止按鈕
	"terminal.integrated.tabs.showActions": "singleTerminal",
	// 不為命令列應用狀態啟用動畫效果
	"terminal.integrated.tabs.enableAnimation": false,
}

自訂 Visual Studio Code 終端機索引標簽的預設名稱，說明，圖示，色彩

設定項terminal.integrated.tabs.title是一個字串（預設值為${process}，即命令列的處理序名稱），用於設定終端機所啟動的命令列應用的預設名稱（標題），該設定項可以包含變數，比如目錄：${cwd}，其中${cwd}表示命令列應用的目前工作目錄。

設定項terminal.integrated.tabs.description是一個字串（預設值為${task}${separator}${local}${separator}${cwdFolder}），用於設定終端機所啟動的命令列應用的預設說明，該設定項可以包含變數，比如${sequence}，其中${sequence}表示命令列應用傳遞給 Visual Studio Code 的名稱。

設定項terminal.integrated.tabs.separator是一個字串，用於設定終端機所啟動的命令列應用的標題和說明之間的分隔符，預設值為 - "。如你所見，該設定項所表示的分隔符可以包含多個字元。

設定項terminal.integrated.tabs.defaultIcon和terminal.integrated.tabs.defaultColor是一個字串，用於設定終端機所啟動的命令列應用的預設圖示和預設圖示色彩，當沒有通過終端機設定檔案指定圖示和圖示色彩時，將使用以上的設定項。

{
	// 命令列應用的標題為目前工作目錄
	"terminal.integrated.tabs.title": "目錄：${cwd}",
	// 命令列應用的說明資訊為命令列應用傳遞給 Visual Studio Code 的名稱
	"terminal.integrated.tabs.description": "${sequence}",
	// 命令列應用的說明和標題之間的分隔符
	"terminal.integrated.tabs.separator": "+-+",
	// 預設圖示為陣列
	"terminal.integrated.tabs.defaultIcon": "array",
	// 預設色彩為 ANSI 黃色
	"terminal.integrated.tabs.defaultColor": "terminal.ansiYellow",
}

設定 Visual Studio Code 終端機的 GPU 加速功能

設定項terminal.integrated.gpuAcceleration是一個字串，用於設定終端機是否采用 GPU 加速功能進行呈現，他擁有以下有效取值。

auto

auto（預設值）表示終端機將嘗試使用 WebGL 加速，即使用 GPU 進行算繪以減少 CPU 的工作量，從而更快的處理每一影格，如果 WebGL 不可用，那麽終端機將使用 DOM 算繪，這會使得終端機的呈現速度變慢。

on

on表示開啟 GPU 加速功能，終端機將使用 WebGL 進行算繪。

off

off表示關閉 GPU 加速功能，終端機將使用 DOM 進行算繪。

{
	// 啟用 GPU 加速功能
	"terminal.integrated.gpuAcceleration": "on",
}

原始碼

settings.json·codebeatme/vscode·GitHub

講解影片

VSCode 終端機設定字型家族、大小、色彩、行高等文字樣式·YouTube
VSCode 自訂終端機色彩（前景、背景、相符項目、醒目提示、ANSI）·YouTube
VSCode 自訂終端機遊標的形狀、寬度、色彩，以及是否閃爍·YouTube