前言
相信已經有不少同學們在利用 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 擴展後，代碼中各匹配的括號對都有了明顯的標識顏色，小夥伴們就能愉快而便捷地對代碼進行閱讀或維護了。
希望介紹的這款擴展能對您有所幫助！喜歡的話就點個贊加關注支持一下哈：)
