前言
相信已经有不少同学们在利用 Visual Studio Code 进行代码编写时经常会用到各种括号(小括号、中括号、大括号等),有时因为代码逻辑的需要,代码中会出现很多嵌套的括号,这对代码的阅读和维护会产生一定的不便和困难。没关系,强大万能的 Visual Studio Code 扩展中就有一款(总下载量450万+)代码括号神器扩展——Bracket Pair Colorizer 2,能对匹配的括号对提供自定义着色进行标识区分。下面就给朋友们介绍分享一下这款代码括号神器扩展。
1. 扩展简介
Bracket Pair Colorizer 2允许用颜色来标识区分代码中匹配的括号,用户可以自定义要匹配的令牌以及要使用的颜色。当单击对应括号时能够用线条直接链接示意,这样有助于清晰展示代码层次结构。
本扩展目前提供新旧两个版本(Bracket Pair Colorizer和Bracket Pair Colorizer 2),相关信息如下:
(1)扩展名称:Bracket Pair Colorizer(旧版本)和Bracket Pair Colorizer 2(新版本)
(2)扩展简述:一款Visual Studio Code上可自定义颜色的括号对扩展
(3)开发者: CoenraadS
(4)最新版本: 旧版本v1.0.61 (2019/07/16) | 新版本v0.2.0(2020/07/07)
(5)GitHub项目网址:旧版本https://github.com/CoenraadS/BracketPair
新版本https://github.com/CoenraadS/Bracket-Pair-Colorizer-2
新旧两个版本都是由CoenraadS开发,区别在于新版本使用了与VSCode相同的括号解析引擎,从而大大提高了速度和准确性。但因此导致无法兼容旧版本。建议大家选择安装新版本(Bracket Pair Colorizer 2)。
2. 扩展安装
Visual Studio Code 上安装 Bracket Pair Colorizer 2 扩展非常简单,步骤如下:
(1)打开 Visual Studio Code 软件,鼠标点击左侧的扩展图标(见标号1处)
(2)在右侧出来的扩展: 商店下的搜索栏中输入“Bracket Pair Colorizer 2”(见标号2处);
(3)选择 Bracket Pair Colorizer 2 扩展,点击右侧的Install按钮(见标号3处)进行扩展安装;
(4)本扩展安装过程很快,安装完毕不用重启即已生效可用。
3. 扩展使用
Bracket Pair Colorizer 2 扩展安装后就已经生效可用了,它为()、[]、{}设置了缺省的括号对颜色配置。
下面对比使用本扩展前后的代码段,看看效果如何?
使用扩展前:
使用扩展后:
怎么样,看上去舒服多了吧。这段代码还算比较简单的,如果遇到复杂、有多层嵌套括号的代码时,本扩展的效果会更加明显。
4. 扩展配置
可以通过两种方式对本扩展进行相应配置:
- 方式一:直接通过在settings.json文件中添加/删除/修改配置项
- 方式二:通过【文件】-【首选项】-【设置】进入“设置”窗口,然后对【用户】-【扩展】-【Bracket Pair Colorizer 2】下的各配置项进行设置。
下面对相关配置项逐一进行介绍,以满足您对
括号对颜色高亮的不同需求:4.1 括号对颜色配置
配置项标识:bracket-pair-colorizer-2.colors
该配置项用于定义使括号对着色的颜色。接受有效的颜色名称、十六进制代码和rgba()值。如:
<code> "bracket-pair-colorizer-2.colors": [ "Gold", "Orchid", "LightSkyBlue" ]/<code>
4.2 括号对颜色模式配置
配置项标识:bracket-pair-colorizer-2.colorMode
该配置项用于对括号对颜色模式进行配置,有如下2种模式(缺省值为Consecutive):
4.3 括号对颜色唯一性配置
配置项标识:bracket-pair-colorizer-2.forceUniqueOpeningColor
该配置项用于对括号对颜色唯一性配置。
4.4 括号对颜色强制循环迭代配置
配置项标识:bracket-pair-colorizer-2.forceIterationColorCycle
该配置项用于对括号对颜色进行强制循环迭代进行配置。
4.5 括号对轮廓线(垂直)配置
配置项标识:bracket-pair-colorizer-2.showVerticalScopeLine
该配置项用于配置在点击某个括号时是否会在其匹配括号之间显示一条垂直示意线?
4.6 括号对轮廓线(水平)配置
配置项标识:bracket-pair-colorizer-2.showHorizontalScopeLine
该配置项用于配置在点击某个括号时是否会在其匹配括号之间显示一条水平示意线?
4.7 括号对轮廓线 CSS 配置
配置项标识:bracket-pair-colorizer-2.scopeLineCSS
该配置项用于配置轮廓线CSS(以突出括号活动范围)。可使用{color}相匹配的现有括号颜色。如下:
<code> "bracket-pair-colorizer-2.scopeLineCSS": [ "borderStyle : solid", "borderWidth : 1px", "borderColor : {color}", "opacity: 0.5" ]/<code>
4.8 括号对装订线显示括号配置
配置项标识:bracket-pair-colorizer-2.showBracketsInGutter
该配置项用于配置在点击括号时是否会在装订线中显示活动范围括号?
4.9 括号对标尺显示括号配置
配置项标识:bracket-pair-colorizer-2.showBracketsInRuler
该配置项用于配置在点击括号时是否会标尺中显示活动范围括号?
4.10 括号对标尺装饰位置配置
配置项标识:bracket-pair-colorizer-2.rulerPosition
该配置项用于配置括号对标尺中的装饰位置,有如下四种选择(缺省值为Center):
4.11 括号对高亮显示范围配置
配置项标识:bracket-pair-colorizer-2.highlightActiveScope
该配置项用于配置是否应该始终突出显示当前范围内的括号?如果要启用该配置项功能,建议禁用editor.matchBrackets
配置项。4.12 括号对范围CSS配置
配置项标识:bracket-pair-colorizer-2.activeScopeCSS
该配置项用于配置活动范围CSS。可使用{color}相匹配的现有括号颜色。如下:
<code> "bracket-pair-colorizer-2.activeScopeCSS": [ "borderStyle : solid", "borderWidth : 1px", "borderColor : {color}", "opacity: 0.5" ]/<code>
4.13 括号对着色除外语言配置
配置项标识:bracket-pair-colorizer-2.excludedLanguages
该配置项用于配置哪些编程语言不被括号着色。
大家可以根据自己的需要来配置出最适合代码括号样式。
注意:新设置配置项后需要重启Visual Studio Code后方能生效。
结束语
Visual Studio Code 安装上这款 Bracket Pair Colorizer 2 扩展后,代码中各匹配的括号对都有了明显的标识颜色,小伙伴们就能愉快而便捷地对代码进行阅读或维护了。
希望介绍的这款扩展能对您有所帮助!喜欢的话就点个赞加关注支持一下哈:)