使大括号在 VS Code 中更明显

Question

我在所有 Web 开发中都使用 VS Code，但我发现在使用 Angular 2 绑定时很难看到大括号。 Dark+ 主题下的牙套是浅灰色的，很细。

hideCancelButton [{ngModel}]="subredditValue"

我想给大括号和方括号上色或将它们加粗。

Answer 1

您可以创建自己的自定义主题或尝试 Marketplace 上可用的主题之一

https://code.visualstudio.com/Docs/customization/themes

Answer 2

您可以通过修改 VS Code 的 .json 设置中的以下默认值来尝试此扩展 Subtle Brackets ：

我改成这样：

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

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

"editor.matchBrackets": false

Answer 3

括号颜色不是由颜色主题定义的。从 2021 年 8 月的 1.60 版开始，VS Code 提供了对括号对着色的原生支持。此功能还设置了一般括号的颜色，即使您不使用括号对功能也是如此。

因此，要更改括号所需的颜色，请在 $HOME/.config/Code/User/settings.json 中添加或修改以下条目：

"bracket-pair-colorizer-2.colors": [
    "Gold",
    "Orchid",
    "LightSkyBlue"
]

将“黄金”更改为例如“橙色”应该可以解决问题，如下面的示例图片所示：

------------^ 在第 27 行，您可以看到花括号的颜色从“金色”变为“金色”

------------^ 到“橙色”。

此更改还将影响 HTML 评论标签  等

使大括号在 VS Code 中更明显

Make braces more visible in VS Code

themes

visual-studio-code