如何自定义 Visual Studio Code 终端的外观和样式

Visual Studio Code 终端的外观和样式

通过编辑 Visual Studio Code 中的设置项，你可以调整终端的外观和样式，比如，字体大小和颜色。当然，设置项可以在设置文件settings.json中编辑，或在设置面板中编辑。

自定义 Visual Studio Code 终端的文本样式

如何设置 VSCode 终端的文本样式

视频演示 YouTube

如何设置 VSCode 终端的文本样式

视频演示 Bilibili

设置项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 终端颜色

视频演示 YouTube

如何自定义 VSCode 终端颜色

视频演示 Bilibili

如果终端所启动的命令行应用（外壳程序）支持，那么你可以通过 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

如何自定义 VSCode 终端光标

视频演示 Bilibili

设置项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 终端的文本样式·Bilibili
如何自定义 VSCode 终端颜色·YouTube如何自定义 VSCode 终端颜色·Bilibili
如何自定义 VSCode 终端光标·YouTube如何自定义 VSCode 终端光标·Bilibili