终端外观

Visual Studio Code 终端的外观可以进行深度自定义。

An example of a custom UI, using Powerline and Nerd Font symbols in the prompt and a custom workbench theme

使用 Sapphire 主题,配合自定义 Starship 提示符,并使用带有 Nerd Font 符号的 Hack 字体

文本样式

终端中的文本可以通过以下设置进行自定义

  • terminal.integrated.fontFamily 在 VS Code 中打开 在 VS Code Insiders 中打开 :要使用的字体系列,它采用 CSS 中 fontFamily 格式的字符串。例如,"'Fira Code', monospace" 将配置 Fira Code 作为主要字体,当缺少字形时,monospace 将作为回退字体。
  • terminal.integrated.fontSize 在 VS Code 中打开 在 VS Code Insiders 中打开 :更改终端中文本的字体大小。
  • terminal.integrated.letterSpacing 在 VS Code 中打开 在 VS Code Insiders 中打开 :以像素为单位配置字符之间的额外水平间距。
  • terminal.integrated.lineHeight 在 VS Code 中打开 在 VS Code Insiders 中打开 :以常规行高的乘数配置字符之间的额外垂直间距。例如,1.1 将增加 10% 的额外垂直空间。
  • terminal.integrated.fontWeight 在 VS Code 中打开 在 VS Code Insiders 中打开 :配置“正常”文本的字体粗细。
  • terminal.integrated.fontWeightBold 在 VS Code 中打开 在 VS Code Insiders 中打开 :配置“粗体”文本的字体粗细。
  • terminal.integrated.fontLigatures.*配置连字

Powerline 符号和 Nerd Fonts

Powerline 字体是经过特殊修补的字体,其中包含可在终端中使用的附加字符。VS Code 的终端无需配置字体即可渲染部分 Powerline 符号,但如果需要更多字形,请通过字体系列设置配置 Powerline 字体。Powerline 字体通常以 " for Powerline" 结尾,以下设置是配置已修补的 DejaVu Sans Mono 的示例

"editor.fontFamily": "'DejaVu Sans Mono for Powerline'"

Nerd Fonts 的工作方式相同,通常带有 " NF" 后缀,以下是配置 Hack 的 Nerd Font 变体的示例

"terminal.integrated.fontFamily": "'Hack NF'"

终端光标

终端光标样式及其是否闪烁可以通过以下设置进行自定义

  • terminal.integrated.cursorStyle 在 VS Code 中打开 在 VS Code Insiders 中打开 :定义光标的形状,可以是块状(block)、线状(line)或下划线(underline)。
  • terminal.integrated.cursorWidth 在 VS Code 中打开 在 VS Code Insiders 中打开 :当光标样式设置为 line 时,光标应有的像素宽度。
  • terminal.integrated.cursorBlinking 在 VS Code 中打开 在 VS Code Insiders 中打开 :终端聚焦时,光标是否应该闪烁。
  • terminal.integrated.cursorStyleInactive 在 VS Code 中打开 在 VS Code Insiders 中打开 :定义非活动状态下光标的形状,可以是空心框(outline)、块状(block)、线状(line)、下划线(underline)或无(none)。

自定义标签页

默认情况下,当有两个或更多终端时,终端标签页会出现在终端视图的右侧;当只有一个终端时,会在视图标题中显示活动终端。

A blank terminal without tabs and then with tabs displayed for three terminals

可见性

默认的可见性旨在节省水平空间,但这可能并不理想。标签页的显示方式可以通过以下设置进行配置

  • terminal.integrated.tabs.hideCondition 在 VS Code 中打开 在 VS Code Insiders 中打开 :何时隐藏右侧标签页,设置为 never 可始终显示它们。
  • terminal.integrated.tabs.showActiveTerminal 在 VS Code 中打开 在 VS Code Insiders 中打开 :何时在终端视图标题中显示活动终端。
  • terminal.integrated.tabs.showActions 在 VS Code 中打开 在 VS Code Insiders 中打开 :何时在视图标题中显示活动终端的操作。
  • terminal.integrated.tabs.location 在 VS Code 中打开 在 VS Code Insiders 中打开 :标签页应显示在终端的左侧还是右侧。
  • terminal.integrated.tabs.enabled 在 VS Code 中打开 在 VS Code Insiders 中打开 :是否使用标签页,禁用后将显示原始的下拉视图。

标签页文本

每个标签页上的文本由以下设置决定

  • terminal.integrated.tabs.title 在 VS Code 中打开 在 VS Code Insiders 中打开 :标签页标题。
  • terminal.integrated.tabs.description 在 VS Code 中打开 在 VS Code Insiders 中打开 :显示在标题右侧的文本。
  • terminal.integrated.tabs.separator 在 VS Code 中打开 在 VS Code Insiders 中打开 :标题和描述之间的分隔符字符。

默认情况下,标题显示 shell 检测到的进程名称。

其他终端通常会将 shell 发送的转义序列显示为标题,这可以通过以下设置进行配置:

"terminal.integrated.tabs.title": "${sequence}"

以下是可供使用的所有变量:

  • ${cwd}:终端的当前工作目录。
  • ${cwdFolder}:终端的当前工作目录,在多根工作区中显示,或在单根工作区中其值不同于初始工作目录时显示。在 Windows 上,此项仅在启用了 shell 集成时显示。
  • ${workspaceFolder}:启动终端时所在的工作区文件夹。
  • ${workspaceFolderName}:启动终端时所在的工作区文件夹名称。
  • ${local}:表示远程工作区中的本地终端。
  • ${process}:终端进程的名称。
  • ${progress}:由 OSC 9;4 序列报告的进度状态。
  • ${separator}:条件分隔符 (-),仅在它被有值的变量或静态文本包围时显示。
  • ${sequence}:进程提供给终端的名称。
  • ${task}:表示此终端与某个任务相关联。
  • ${shellType}:检测到的 shell 类型。
  • ${shellCommand}:根据 shell 集成正在执行的命令。这也需要对检测到的命令行具有高置信度,在某些提示符框架中可能无法工作。
  • ${shellPromptInput}:根据 shell 集成的 shell 完整提示输入。

图标

每个终端都有一个由其 终端配置文件 确定的关联图标。如果配置文件中未定义,将使用默认图标及其颜色,可以通过 terminal.integrated.tabs.defaultIcon 在 VS Code 中打开 在 VS Code Insiders 中打开 terminal.integrated.tabs.defaultColor 在 VS Code 中打开 在 VS Code Insiders 中打开 设置进行配置。

状态

终端的“状态”(如果有)由出现在标签页右侧的图标表示。某些状态涉及动画。如果这令人分心,可以通过以下设置禁用动画:

"terminal.integrated.tabs.enableAnimation": false

视觉提醒 (Visual bell)

当终端的铃声被触发时,会短暂显示一个黄色铃铛图标。这可以通过 terminal.integrated.enableBell 在 VS Code 中打开 在 VS Code Insiders 中打开 禁用,持续时间可以通过 terminal.integrated.bellDuration 在 VS Code 中打开 在 VS Code Insiders 中打开 进行配置。

终端颜色

虽然终端能够显示真彩色,但程序通常使用 8 种 ANSI 颜色(黑色、红色、绿色、黄色、蓝色、洋红色、青色和白色)及其各自的亮色变体。这些 ANSI 颜色由活动颜色主题决定,但也可以使用 workbench.colorCustomizations 设置独立于主题进行配置。

粗体文本是使用正常 ANSI 颜色还是亮色变体,可以通过 terminal.integrated.drawBoldTextInBrightColors 在 VS Code 中打开 在 VS Code Insiders 中打开 设置进行配置。

最小对比度

由于深色/浅色主题、ANSI 颜色或运行中的 shell/程序等冲突,终端经常会出现对比度问题。

最小对比度功能解决了这个问题,它通过增加或减少文本前景色亮度,直到达到 4.5:1 的对比度。

此功能的一个缺点是彩色文本有时可能会失去部分饱和度。该功能可以进行配置或禁用以获取原始颜色:

"terminal.integrated.minimumContrastRatio": 1

连字

终端连字允许将多个字符渲染为一个。您可以通过配置 terminal.integrated.fontLigatures.enabled 在 VS Code 中打开 在 VS Code Insiders 中打开 设置在终端中启用连字,前提是终端字体系列( terminal.integrated.fontFamily 在 VS Code 中打开 在 VS Code Insiders 中打开 )支持它们。

Enabling ligatures will combine certain sets of characters into one, for example >= into the greater than or equals sign

字体特性设置

启用连字后,还可以以 CSS 属性 font-feature-settings 的格式设置详细的字体特性列表。这使您可以更精细地控制连字的渲染方式。例如,禁用标准 calt 连字并启用特定的字体变体,看起来像 "calt" off, "ss03"。有关字体支持的变体列表,请查阅字体的文档。

回退连字

当字体支持连字但 VS Code 不支持解析相关字体时,您可以禁用 GPU 加速,或者指定字符序列列表以手动连接来实现连字。

默认情况下,回退连字是编程中常用连字的列表。通过配置 terminal.integrated.fontLigatures.fallbackLigatures 在 VS Code 中打开 在 VS Code Insiders 中打开 设置来微调该列表。例如:

// Only use ligatures for `ff`, `fi` and `fl`
"terminal.integrated.fontLigatures.fallbackLigatures": [
    "ff",
    "fi",
    "fl"
]

GPU 加速

终端具有两种不同的渲染器,每种渲染器都有不同的权衡:

  • WebGL 渲染器 - 真正的 GPU 加速。
  • DOM 渲染器 - 一种速度慢得多但兼容性极佳的回退渲染器。

由 WebGL 渲染器驱动的 GPU 加速在终端中默认启用。通过显著减少 CPU 渲染每一帧所花费的时间,这有助于终端更快速地工作并以高 FPS 显示。

默认的 terminal.integrated.gpuAcceleration 在 VS Code 中打开 在 VS Code Insiders 中打开 值为 auto,它会尝试使用 WebGL 渲染器;如果失败,则回退到 DOM 渲染器。在 Linux 虚拟机、不支持 WebGL 的浏览器或驱动程序过时的机器上,WebGL 可能无法正常工作。

自定义字形

启用 GPU 加速后,自定义渲染(而非字体)将改善终端中某些字符的显示效果。支持以下 Unicode 范围:

  • 方框绘图 (U+2500-U+257F)
  • 块元素 (U+2580-U+259F)
  • 盲文图案 (U+2800-U+28FF)
  • Powerline 符号 (U+E0A0-U+E0D4,私有使用区)
  • 进度指示器 (U+EE00-U+EE0B,私有使用区)
  • Git 分支符号 (U+F5D0-U+F60D,私有使用区)
  • 传统计算符号 (U+1FB00-U+1FBFF)

这也意味着配置的字体不需要包含这些字符,并且它们能实现像素完美的绘制,并在适当的情况下拉伸以填满整个单元格的大小。

以下是上述范围内所有约 800 个受支持的字符

Box drawing, block characters and some Powerline symbols fill the entire cell in the terminal

此功能可以通过将 terminal.integrated.customGlyphs 在 VS Code 中打开 在 VS Code Insiders 中打开 设置为 false 来禁用。

重新缩放模糊宽度字形

某些 Unicode 字符具有模糊宽度,终端的后端和前端可能对其大小存在分歧。当启用 GPU 加速并出现此歧义时,字形将在水平方向上进行重新缩放以适应单个单元格,从而防止重叠。

例如,下图中的罗马数字字符被压缩进了一个单元格中。

VIII and XII characters would be rescaled horizontally so as to not overlap with following characters. They feature a thinner stroke width when this happens due to the scaling

此功能可以通过将 terminal.integrated.rescaleOverlappingGlyphs 在 VS Code 中打开 在 VS Code Insiders 中打开 设置为 false 来禁用,这会导致以下重叠渲染效果。

When off, the VIII and XII characters may overlap the following characters

自定义提示符

大多数 shell 允许对终端提示符进行深度自定义。这是通过在 VS Code 之外配置您的 shell 来完成的,通常通过修改 $PS1 变量、设置 $PROMPT_COMMAND 或安装插件来实现。

一些提示符(如 Starshipoh-my-posh)可以显示 Git 状态等信息,并且适用于大多数 shell,因此它们是入门时的不错选择。

常见问题

为什么我的终端显示一个多色三角形或一个黑色矩形?

终端在某些环境下可能会遇到 GPU 加速渲染的问题。例如,您可能会看到一个巨大的多色三角形而不是文本。这通常是由驱动程序/虚拟机图形问题引起的,在 Chromium 中也会发生同样的情况。通过使用 --disable-gpu 标志启动 code,或者将 terminal.integrated.gpuAcceleration 在 VS Code 中打开 在 VS Code Insiders 中打开 设置为 off 以避免在终端中使用 canvas,从而绕过这些问题。有关更多信息,请参阅 GPU 加速部分。

为什么终端里的颜色显示不正确?

最小对比度功能可能会导致颜色显示不符合预期。可以通过以下设置禁用它:

"terminal.integrated.minimumContrastRatio": 1

关于此项为何是默认设置的背景信息,请参见 vscode#146406

© . This site is unofficial and not affiliated with Microsoft.