Visual Studio Code中的自定义大括号高亮显示

Question

在Visual Studio Code中是否可以自定义括号的高亮显示？似乎用户设置、工作区设置以及TextMate主题几乎可以自定义所有其他选项。无论您使用何种语法高亮方案，花括号始终具有相同的浅灰色轮廓/矩形框。我没有找到现有的用户/工作区设置或TextMate范围来解决这个特定功能。

最终，我希望匹配的括号能够以纯色高亮显示，类似于Visual Studio 2013和2015中默认的暗色主题。

- Coolidge

Answer 1

为了以后的参考，现在vscode有一种选项可以通过将以下内容添加到settings.json来更改括号高亮颜色：

"workbench.colorCustomizations" : {
        "editorBracketMatch.background": "#f008",
        "editorBracketMatch.border": "#f00"
}

Formats supported are #RGB, #RGBA, #RRGGBB, #RRGGBBAA. The rgba(255,255,255,1) format that seems to work in other places in the settings file appears to not work here.

只有一个功能与此相关的仍然缺失，即当光标位于括号之间时高亮显示。只有当其中一个括号被选中时才会高亮。我在设置或工作台.颜色自定义中没有找到当前解决方案。

更新于2018年04月21日 现在有一个名为Bracket Pair Colorizer的插件，它会在当前括号旁边显示行号，无论光标放在哪里。但是在较慢的硬件上（第三代i5笔记本电脑），我在编辑大文件（3000+行php文件）时遇到了一些减速问题。另一个表现良好且可以突出显示当前缩进的插件是Guides。

更新于2019年11月10日 VSCode 1.40现在突出显示包围光标的括号。

更新于2021年08月09日 正如@desilicius在评论中提到的，Bracket Pair Colorizer已不再由作者维护。他提供了Blockman - Highlight Nested Code Blocks作为替代品，它具有相同的功能但外观完全不同，以及Highlight Matching Tag，这是一个很棒的插件，但只能在html（和jsx）标签上工作，正如其名称所示。

更新于2021年08月13日 VSCode团队决定将括号配对着色作为内置功能添加。目前正在进行改进，速度比BPC2提高了10,000倍。讨论可以在此处找到。

- Vlad Macovei

---

注意：有一个新的包具有相同的功能，但是通过使用VS Code解析引擎实现了更快的速度。它的名称是Bracket Pair Colorizer 2。 - Beauty

我已经尝试过了，但是3000多个文件已经增长到5000多个，插件仍然很慢。 - Vlad Macovei

奇怪的是，没有前景选项来更改匹配括号本身的颜色。 - Nathron

Bracket Pair Colorizer 2 不再维护。 - daslicious

Answer 2

你可以尝试使用Bracket Pair Colorizer 2扩展程序，它与Visual Studio Code兼容。

- Rubel Miah

---

我在寻找解决 vscode 高亮错误缩进指南的 bug 时发现了这个。而 Bracket Pair Colorizer 2 则添加了自己的正确缩进指南（默认的错误缩进指南仍然存在）。非常酷！ - Stack Underflow

Answer 3

现在，您可以在VS Code中突出显示括号并更改其颜色。您可以尝试使用Subtle Brackets 扩展来修改VS Code的.json设置中的默认值：

我将其更改为以下内容：

"subtleBrackets.bracketPairs": [
    "{}",
    "[]",
    "()",
    "<>"
],
"subtleBrackets.styles": {
    "global": {
        "color": "yellow",
        "borderWidth": "1px",
        "borderStyle": "none none solid none"
    }
}

不要忘记将VS Code的.matchbrackets值设置为“false”。

"editor.matchBrackets": false

- loretogutierrezjr

---

我更喜欢使用 rainbow-brackets 扩展或者 Bracket Pair Colorizer，因为 Subtle Brackets 只能通过 "workbench.colorCustomizations" 实现相同的效果。 - Dima Fomin

遗憾的是 subtleBrackets 不适用于 .vue 文件。 - zerohedge

Answer 4

也许您会喜欢VSCode扩展程序"Blockman"，它可以突出显示嵌套的代码块（我是Blockman的作者）。

VSCode扩展程序"Blockman"是处理括号的新方法，它不仅可以突出显示括号本身，而且还可以基于括号（大括号/方括号/圆括号/花括号）呈现代码块。我认为这是一个更好的视觉辅助工具，可以更轻松地感知代码结构，更快速、更舒适地理解代码结构。

- leodevbro

Answer 5

自定义括号高亮将在 VSCode 1.76（2022 年 2 月）更加精确，通过 问题 170497 和 PR 172758：它支持对匹配的括号的 子集 进行着色。

例如：

"[plaintext]": {
    "editor.language.brackets": [
      ["{", "}"],
      ["(", ")"],
      ["[", "]"]
    ],
    "editor.language.colorizedBracketPairs": [
      ["{", "}"],
      ["<", ">"]
    ]
  },

给出：

今天您可以使用VSCode Insiders。

- VonC

Answer 6

2021年9月更新：自2021年8月（版本1.60）更新以来，VS Code现已提供“括号对颜色化”功能。

请将以下内容添加到您的settings.json文件中：

 "editor.bracketPairColorization.enabled": true

保存文件后，括号应立即着色。

- Employee

Answer 7

如果您想要移除括号的颜色和边框，您可以在您的settings.json中使用带有0不透明度的十六进制颜色：

"workbench.colorCustomizations": {
    "editorBracketMatch.border": "#ffffff00",
    "editorBracketMatch.background": "#ffffff00",
}

您可以覆盖任何主题：

"workbench.colorCustomizations": {
  "[*]": {
    "editorBracketMatch.border": "#ffffff00",
    "editorBracketMatch.background": "#ffffff00",
  }
}

为了针对特定的主题，请用主题名称替换通配符*。

- snnsnn

Answer 8

CSS解决方案

对于那些正在进行真正的自定义CSS以适应VS-Code的人来说，如果他们正在寻找实际的CSS类，那么要编辑的类以调整选定括号的显示是.bracket-match。以下是我在VS-Code中为匹配的括号对添加自定义动画的示例。

.bracket-match{
  border-radius:20%;
  background: linear-gradient(270deg, rgba(255, 154, 162, .5), rgba(255, 183, 178, .5), rgba(255, 218, 193, .5), rgba(226, 240, 203, 0.5), rgba(199, 206, 234, 0.5), rgba(199, 206, 234, 0.5));
  background-size: 1000% 100%;
  color: transparent;
  border-bottom:0px !important;
  outline: 1px solid rgba(255, 255, 255, 1);
  animation: outlineExpand .6s linear 1, flowBkg 1s linear infinite running;
  transform:translate(1px, 0px);
}

@keyframes flowBkg {
  0%{background-position:0% 51%}
  100%{background-position:100% 50%}
}

@keyframes outlineExpand{
  0%{ 
    outline-width: 3px; 
    outline-color: rgba(255,70,70,.3);

  }
  100%{
    outline-width: 10px;
    outline-offset:30px;
    outline-color: rgba(255,70,70,.3);  
  }
}

注意：

截至2023年10月，目前的VS Code版本有点棘手，无法真正自定义CSS。请参考相关扩展，这是在VS Code中常用的自定义CSS和JS的方法。

- Llama D'Attore