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

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

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

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

如何為 Visual Studio Code 終端機設定字型家族，字型大小，字型色彩，行高等文字樣式

影片演示 YouTube

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

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

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

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

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

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

{
	// 字型家族為 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 終端機中的特殊字元啟用自訂字形

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

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

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

自訂 Visual Studio Code 終端機的色彩

如何設定 Visual Studio Code 終端機的前景色彩，背景色彩，尋找相符項色彩，醒目提示色彩，ANSI 色彩

影片演示 YouTube

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

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

foreground，background，dropBackground，border，tab.activeBorder

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

selectionForeground，selectionBackground，inactiveSelectionBackground

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

hoverHighlightBackground

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

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

terminalCursor

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

terminalOverviewRuler

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

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

findMatchBackground，findMatchBorder，findMatchHighlightBackground，findMatchHighlightBorder

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

terminalCommandDecoration

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

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

terminalStickyScroll

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

tab.activeBorder

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

terminalCommandGuide

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

ansi<Color>

terminalCommandGuide.ansi<Color>屬性用於設定 Visual Studio Code 終端機中的 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",
	},
}

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

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

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

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

如何為 Visual Studio Code 終端機設定遊標形狀，遊標寬度，遊標色彩，以及遊標是否閃爍

影片演示 YouTube

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

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

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

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

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

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

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

singleTerminal

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

singleGroup

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

never

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

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

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

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

singleTerminalOrNarrow

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

singleTerminal

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

always

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

never

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

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

singleTerminalOrNarrow

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

singleTerminal

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

always

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

never

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

Visual Studio Code 設定項terminal.integrated.tabs.enableAnimation是一個布林值，用於設定 Visual Studio Code 終端機所啟動的命令列應用的狀態是否擁有動畫效果，預設為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 終端機索引標簽的預設名稱，說明，圖示，色彩

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

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

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

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

{
	// 命令列應用的標題為目前工作目錄
	"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 加速功能

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

auto

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

on

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

off

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

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

程式碼

settings.json·codebeatme/vscode·GitHub

講解影片

如何為 Visual Studio Code 終端機設定字型家族，字型大小，字型色彩，行高等文字樣式·YouTube
如何設定 Visual Studio Code 終端機的前景色彩，背景色彩，尋找相符項色彩，醒目提示色彩，ANSI 色彩·YouTube
如何為 Visual Studio Code 終端機設定遊標形狀，遊標寬度，遊標色彩，以及遊標是否閃爍·YouTube