如何自定义 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 终端设置字体家族，字体大小，字体颜色，行高等文本样式

视频演示 BiliBili

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 颜色

视频演示 BiliBili

如果 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 设置项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 终端设置字体家族，字体大小，字体颜色，行高等文本样式·BiliBili
如何设置 Visual Studio Code 终端的前景颜色，背景颜色，查找匹配项颜色，高亮颜色，ANSI 颜色·BiliBili