How to Customize the Appearance and Styles of Visual Studio Code Terminal

The Appearance and Styles of Visual Studio Code Terminal

By editing setting items in Visual Studio Code, you can adjust the appearance and styles of Visual Studio Code Terminal, such as, font sizes and colors. Of course, setting items can be edited in the Visual Studio Code settings file settings.json or in the Visual Studio Code Settings Panel.

Customize the Text Style of Visual Studio Code Terminal

The value of the Visual Studio Code setting item terminal.integrated.fontFamily is a string that can be used to set the font family of Visual Studio Code Terminal in a format similar to that of the CSS font-family property, which can contain multiple font names separated by ,, if the font name contains spaces, it needs to be enclosed in single quotes ', e.g. "'Source Code Pro',Consolas".

The Visual Studio Code setting item terminal.integrated.fontSize has a value of a number, such as 24, which can be used to set the font size (in pixels) of Visual Studio Code Terminal.

The Visual Studio Code setting item terminal.integrated.fontWeight has a value of a number or string, for example, "100", 200, "bold", "normal", and is similar to the CSS font-weight property for setting the font weight of non-bold text in Visual Studio Code Terminal. If a number or string representing a number is used to set the font weight (which requires font support), the corresponding number should be between 1 and 1000.

The Visual Studio Code setting item terminal.integrated.fontWeightBold is similar to the setting item terminal.integrated.fontWeight, except that terminal.integrated. fontWeightBold is used to set the font weight of bold text in Visual Studio Code Terminal.

The Visual Studio Code setting item terminal.integrated.letterSpacing has a value of a number, such as 5, and can be used to set additional horizontal spacing (in pixels) between text characters in Visual Studio Code Terminal.

The Visual Studio Code setting item terminal.integrated.lineHeight has a value of a number that represents a multiple of the normal line height, such as 1.2, and can be used to set the line height between multiple lines of text in Visual Studio Code Terminal.

{
	// The font family is Courier New
	"terminal.integrated.fontFamily": "Courier New",
	// The font size is 24 pixels
	"terminal.integrated.fontSize": 24,
	// Non-bold text has a font weight of 600
	"terminal.integrated.fontWeight": 600,
	// The font weight of bold text is normal
	"terminal.integrated.fontWeightBold": "normal",
	// The additional spacing between characters is 5 pixels
	"terminal.integrated.letterSpacing": 5,
	// The line height between multiple lines of text is 1.2 times the normal line height
	"terminal.integrated.lineHeight": 1.2,
}

Set Whether to Enable Custom Glyphs for Special Characters in Visual Studio Code Terminal

The value of the Visual Studio Code setting item terminal.integrated.customGlyphs is a boolean value that can be used to set whether Visual Studio Code Terminal enables custom glyphs for some special characters, which means that fonts do not need to be used to draw them, and if it’s false (the default value is true) then fonts are used to draw the characters.

{
	// Enable custom glyphs for some special characters
	"terminal.integrated.customGlyphs": true,
}

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

Customize the Colors of Visual Studio Code Terminal

If supported by the command-line application (shell program) that Visual Studio Code Terminal launches, then you can set the relevant colors for the command-line application via the Visual Studio Code setting item workbench.colorCustomizations. Of course, these colors may already be specified by the current Visual Studio Code color theme.

The Visual Studio Code setting item workbench.colorCustomizations is an object to which the following properties (setting items) can be added to set some of the colors of Visual Studio Code Terminal, where the value of the property is a string representing the color in a format similar to the format of colors in CSS, but should be written as "#RGB", "#RGBA", "#RRGGBB", "#RRGGBBAA" as much as possible, or as "default" to use the default color.

foreground，background，dropBackground，border，tab.activeBorder

The terminal.foreground and terminal.background properties are used to set the foreground (text) color and background color of Visual Studio Code Terminal. The terminal.dropBackground property is used to set the background color of the Visual Studio Code Terminal when used as a drag-and-drop target (it needs to have transparency to prevent the text from being obscured). The terminal.border property is used to set the border color of the split pane in Visual Studio Code Terminal, which defaults to the value of the setting item panel.border.

selectionForeground，selectionBackground，inactiveSelectionBackground

The terminal.selectionForeground and terminal.selectionBackground properties are used to set the foreground (text) color and the background color of selected content in Visual Studio Code Terminal. The terminal.inactiveSelectionBackground property is used to set the background color of selected content in an inactive Visual Studio Code Terminal.

hoverHighlightBackground

The terminal.hoverHighlightBackground property is used to set the background color of the highlighted content in Visual Studio Code's Terminal when the mouse hovers (it needs to have transparency to prevent the text from being obscured).

Some command-line applications will output something that needs to be highlighted, for example PowerShell may highlight folders.

terminalCursor

The terminalCursor.foreground property is used to set the Visual Studio Code Terminal's cursor color, and the terminalCursor.background property is used to set the color of the content that is obscured by Visual Studio Code Terminal's block cursor.

terminalOverviewRuler

The terminalOverviewRuler.border property is used to set the border color of Visual Studio Code Terminal's overview ruler, and the terminalOverviewRuler.cursorForeground and terminalOverviewRuler.findMatchForeground properties are used to set the color of the cursor and find matches in Visual Studio Code Terminal's overview ruler. The overview ruler is displayed in the scrollbar area of Visual Studio Code's Terminal and is used to show something in the command-line application, such as the cursor position or executed commands.

findMatchBackground，findMatchBorder，findMatchHighlightBackground，findMatchHighlightBorder

The terminal.findMatchBackground and terminal.findMatchBorder properties are used to set the background color (it needs to have transparency to prevent the text from being obscured) and border color of the current find match in Visual Studio Code Terminal, and the terminal.findMatchHighlightBackground and terminal.findMatchHighlightBorder properties are used to set the background color (it needs to have transparency to prevent the text from being obscured) and border color of the non-current find matches in Visual Studio Code Terminal.

terminalCommandDecoration

The terminalCommandDecoration.defaultBackground, terminalCommandDecoration.successBackground and terminalCommandDecoration. errorBackground properties are used to set the default color of the command decoration, the color of the command decoration that executes successfully, and the color of the command decoration that fails to execute in Visual Studio Code Terminal.

Command decorations can provide context menus for executed commands if supported by the command-line application.

terminalStickyScroll

The terminalStickyScroll.background and terminalStickyScroll.border properties are used to set the background color and border color of Visual Studio Code Terminal's sticky scroll overlay, and the terminalStickyScrollHover.background property is used to set the background color of the sticky scroll overlay of Visual Studio Code Terminal when the mouse is hovering.

tab.activeBorder

The terminal.tab.activeBorder property is used to set the color of the border (by default the left border) of the active command-line application tab in the right area of the Visual Studio Code Terminal Panel, which defaults to the value of the setting item tab.activeBorder.

terminalCommandGuide

The terminalCommandGuide.foreground property is used to set the color of the command guide in Visual Studio Code Terminal.

ansi<Color>

The terminalCommandGuide.ansi<Color> property is used to set the ANSI colors in Visual Studio Code Terminal, such as terminal.ansiBlack, terminal.ansiRed, through which you can display any color of ANSI as other colors.

{
	"workbench.colorCustomizations": {
		// Foreground color
		"terminal.foreground": "#eee",
		// Background color
		"terminal.background": "#111",
		// The background color when used as a drag-and-drop target
		"terminal.dropBackground": "#00FF0033",
		// Split pane border color
		"terminal.border": "#fff",
		// Foreground color of selected content
		"terminal.selectionForeground": "#FFF",
		// Background color of selected content
		"terminal.selectionBackground": "#239484",
		// Background color of the selected content in the active terminal
		"terminal.inactiveSelectionBackground": "#6483ac",
		// Background color of the highlighted content on hover
		"terminal.hoverHighlightBackground": "#79797999",
		// Cursor color
		"terminalCursor.foreground": "#beeb6b",
		// Color of the content obscured by the block cursor
		"terminalCursor.background": "#278ef6",
		// Border color of the overview ruler
		"terminalOverviewRuler.border": "#ff0000",
		// Cursor color in the overview ruler
		"terminalOverviewRuler.cursorForeground": "#c8c211",
		// Color of the find matches in the overview ruler
		"terminalOverviewRuler.findMatchForeground": "#1aff00",
		// Background color of the current find match
		"terminal.findMatchBackground": "#0f57f333",
		// Border color of the current find match
		"terminal.findMatchBorder": "#ff6600",
		// Background color of non-current find matches
		"terminal.findMatchHighlightBackground": "#ff660033",
		// Border color for non-current find matches
		"terminal.findMatchHighlightBorder": "#0f57f3",
		// Default background color for command decorations
		"terminalCommandDecoration.defaultBackground": "#b5b5b5",
		// Decoration background color of successful commands
		"terminalCommandDecoration.successBackground": "#007c13",
		// Decoration background color of error commands
		"terminalCommandDecoration.errorBackground": "#760000",
		// Background color of the sticky scroll overlay
		"terminalStickyScroll.background": "#004d3f",
		// Border color of the sticky scroll overlay
		"terminalStickyScroll.border": "#00ceb2",
		// Background color of the sticky scroll overlay on hover
		"terminalStickyScrollHover.background": "#00886f",
		// Border color of the active tab in the right area
		"terminal.tab.activeBorder": "#8491fb",
		// Color of the command guide
		"terminalCommandGuide.foreground": "#ece639",
		// ANSI Color Black
		"terminal.ansiBlack": "#111",
		// ANSI Color Red
		"terminal.ansiRed": "#aa0000",
	},
}

The value of the Visual Studio Code setting item terminal.integrated.drawBoldTextInBrightColors is a boolean value that can be used to set whether or not bold text in Visual Studio Code’s Terminal will be in bright ANSI colors, and its default value is true, which makes text displayed in bold brighter.

The value of the Visual Studio Code setting item terminal.integrated.minimumContrastRatio is a number that can be used to set the minimum contrast for the foreground color of the Visual Studio Code Terminal (default value is 4.5). If this setting item is less than or equal to 1, it means that there is no contrast modification, and if this setting item is greater than or equal to 21, it means that the maximum contrast is used, which will eliminate some of the problems due to the Visual Studio Code color theme.

{
	// Bold text does not have bright ANSI colors
	"terminal.integrated.drawBoldTextInBrightColors": false,
	// Minimum contrast for foreground colors
	"terminal.integrated.minimumContrastRatio": 10,
}

Customize the Cursor Style of Visual Studio Code Terminal

The Visual Studio Code setting item terminal.integrated.cursorStyle can be used to set the shape of Visual Studio Code Terminal’s cursor when it gains focus, and its valid values can be one of the following, "block" (default), "line", "underline".

The Visual Studio Code setting item terminal.integrated.cursorStyleInactive can be used to set the shape of the Visual Studio Code Terminal’s cursor when it does not have focus, and its valid values can be one of the following, "block", "line", "underline", "outline" (default), "none" (no cursor).

The Visual Studio Code setting item terminal.integrated.cursorWidth has a value of a number, such as 10, and can be used to set the Visual Studio Code Terminal’s cursor width, regardless of whether or not it has the focus, and is only valid when the cursor shape is linear.

The value of the Visual Studio Code setting item terminal.integrated.cursorBlinking is a boolean value that can be used to set whether or not the Visual Studio Code Terminal’s cursor blinks, and if it is true (the default value is false), the cursor blinks automatically.

{
	// Cursor shape is blocky when focus is obtained
	"terminal.integrated.cursorStyle": "block",
	// Cursor shape is linear when focus is not obtained
	"terminal.integrated.cursorStyleInactive": "line",
	// Cursor width is 10, valid only when the shape is linear
	"terminal.integrated.cursorWidth": 10,
	// The cursor will blink
	"terminal.integrated.cursorBlinking": true,
}

Customize How Tabs are Displayed in Visual Studio Code Terminal

The Visual Studio Code setting item terminal.integrated.tabs.hideCondition is a string that sets the condition for hiding tabs in the right area of the Visual Studio Code Terminal, and has the following valid values.

singleTerminal

singleTerminal (default) indicates that the tabs in the right area will be hidden when there is only one command-line application in the Visual Studio Code Terminal Panel.

singleGroup

singleGroup indicates that the tabs in the right area will be hidden when there is only one command-line application or command-line group in the Visual Studio Code Terminal Panel.

never

never indicates that the tab will always be displayed in the Visual Studio Code Terminal Panel.

The Visual Studio Code setting item terminal.integrated.tabs.location is a string that sets the display location of the tabs in the right area of Visual Studio Code Terminal, which has the following valid values, "left", "right" (default).

The Visual Studio Code setting item terminal.integrated.tabs.enabled is a boolean value that sets whether or not the tabs in the right area of the Visual Studio Code Terminal are enabled, and if it is false (the default value is true), a list box will be used to display command-line applications in the Visual Studio Code Terminal Panel.

The Visual Studio Code setting item terminal.integrated.tabs.showActiveTerminal is a string that sets how Visual Studio Code Terminal’s command-line information in the upper right corner is displayed, and has the following valid values.

singleTerminalOrNarrow

singleTerminalOrNarrow (default) indicates that the command-line information in the upper right corner will be displayed when there is only one command-line application or command-line group in the Visual Studio Code Terminal Panel, or when the tabs are too narrow for the text to be displayed.

singleTerminal

singleTerminal indicates that when there is only one command-line application or command-line group in the Visual Studio Code Terminal Panel, the command-line information in the upper right corner will be displayed.

always

always indicates that command-line information are always displayed.

never

never indicates that no command-line information is displayed.

The Visual Studio Code setting item terminal.integrated.tabs.showActions is a string that sets how Visual Studio Code’s Terminal split and trash can buttons are displayed in the upper right corner, and has the following valid values.

singleTerminalOrNarrow

singleTerminalOrNarrow (default) indicates that the split button and trash can button in the upper right corner will be displayed when there is only one command-line application or command-line group in the Visual Studio Code Terminal Panel, or when the tabs are too narrow for the text to be displayed.

singleTerminal

singleTerminal indicates that when there is only one command-line application or command-line group in the Visual Studio Code Terminal Panel, the split button and trash can button in the upper right corner will be displayed.

always

always indicates that the split button and trash can button are always displayed.

never

never indicates that the split button and trash can button are not displayed.

The Visual Studio Code setting item terminal.integrated.tabs.enableAnimation is a boolean value that sets whether the state of the command-line application launched by Visual Studio Code Terminal has an animation effect or not, and defaults to true, which has an animation effect.

{
	// Hide tabs when only one command-line or command-line group is available
	"terminal.integrated.tabs.hideCondition": "singleGroup",
	// Tabs are displayed on the left
	"terminal.integrated.tabs.location": "left",
	// Use a list box instead of tabs
	"terminal.integrated.tabs.enabled": true,
	// Command-line information is always displayed
	"terminal.integrated.tabs.showActiveTerminal": "always",
	// Show the split and trash can button when there is only one command-line or command-line group
	"terminal.integrated.tabs.showActions": "singleTerminal",
	// Animations are not enabled for command-line application states
	"terminal.integrated.tabs.enableAnimation": false,
}

Customize the Default Name, Description, Icon, Color of Visual Studio Code Terminal Tabs

The Visual Studio Code setting item terminal.integrated.tabs.title is a string (with a default value of "${process}", which is the process name of the command line) that sets the default name (title) of the command-line application launched by Visual Studio Code Terminal, which can contain variables such as "Directory: ${cwd}", where ${cwd} represents the current working directory of the command-line application.

The Visual Studio Code setting item terminal.integrated.tabs.description is a string (with a default value of "${task}${separator}${local}${separator}${cwdFolder}") that sets the default description of the command-line application launched by Visual Studio Code Terminal, which can contain variables such as "${sequence}", where ${sequence} represents the name passed to Visual Studio Code by the command-line application.

The Visual Studio Code setting item terminal.integrated.tabs.separator is a string that sets the separator between the title and description of the command-line application launched by Visual Studio Code Terminal, with the default value of " - ". As you can see, the separator indicated by this setting item can contain multiple characters.

The Visual Studio Code setting item terminal.integrated.tabs.defaultIcon and terminal.integrated.tabs.defaultColor are strings used to set the default icon and default icon color for the command-line application launched by Visual Studio Code Terminal. The default icon and default icon color for command-line applications launched will use the above Visual Studio Code setting items when the icon and icon color are not specified via the terminal profile.

{
	// The command line application's title is the current working directory
	"terminal.integrated.tabs.title": "Directory: ${cwd}",
	// The description information for the command-line application is the name that the command-line application passes to Visual Studio Code
	"terminal.integrated.tabs.description": "${sequence}",
	// The separator between the description and title of the command-line application
	"terminal.integrated.tabs.separator": "+-+",
	// The default icon is array
	"terminal.integrated.tabs.defaultIcon": "array",
	// The default color is ANSI yellow
	"terminal.integrated.tabs.defaultColor": "terminal.ansiYellow",
}

Set GPU Acceleration for Visual Studio Code Terminal

The Visual Studio Code setting item terminal.integrated.gpuAcceleration is a string that sets whether Visual Studio Code Terminal is rendered with GPU acceleration, and has the following valid values.

auto

auto (default) means that Visual Studio Code Terminal will try to use WebGL acceleration, which means that it will use the GPU to reduce the CPU workload so that each frame is processed faster, and if WebGL is unavailable then Visual Studio Code Terminal will use the DOM for rendering, which will make Terminal rendering slower.

on

on means that GPU acceleration is turned on and Visual Studio Code Terminal will use WebGL for rendering.

off

off means that GPU acceleration is turned off and Visual Studio Code Terminal will use the DOM for rendering.

{
	// Enable GPU acceleration
	"terminal.integrated.gpuAcceleration": "on",
}

Source Code

settings.json·codebeatme/vscode·GitHub