by Aleksandar Pasaric from Pexelsby Aleksandar Pasaric from Pexels

本文最近更新日期：2022/05/07

習慣使用 IDE 的開發者們，即使沒有很清楚「bracket pair colorization」為何物，對於它實際的功能特性也應該不會太陌生。

無論以何種語言進行開發，程式碼中總會有著為數眾多的大、中、小括號，用來包覆它所對應的程式邏輯區塊（code block）。

而 bracket pair colorization 講白了，就是為這些括號上色，以增加識別度。

什麼是 bracket pair colorization

bracket pair colorization 簡言之就是讓同一個程式碼區塊的開頭與結尾括號都使用同一種顏色的功能。

因為是用在開頭與結尾的成對括號上所以稱為 bracket pair，而 colorization 則是為該對括號「上色」之意，讓人一眼就能看出括號所包含邏輯區塊的對應範圍為何。

此外，不同層級的區塊通常會搭配不同的顏色，如此一來，即使正在開發或修改好幾層縮排齊聚的程式碼複雜地帶，各區塊的層次及對應的範圍也能盡可能保持一目了然，讓我們不至於眼花撩亂。

文字描述可能不夠直觀，要使用過才好理解，但沒用過的人只要看看這張 VS Code 官方圖片也能秒懂 bracket pair colorization 的意義與價值：

成對的括號與配色讓我們避免迷失在程式碼中成對的括號與配色讓我們避免迷失在程式碼中

總之，可以想見，這樣的功能是何等的實用，可以說是所有開發者必備。

Bracket Pair Colorizer 2

這類需求既然迫切，合理推測，為之開發的 IDE 套件一定也不少。在 VS Code 中，最有名的相關套件就是 Bracket Pair Colorizer 2（該套件目前已標記為 deprecated），我也是用它！裝完它後只要在 VS Code 的settings.json進行層級與顏色的相關設定即可：

1
2
3
4
5
6
7
"bracket-pair-colorizer-2.colors": [
    "#7777ff",
    "BlueViolet",
    "Crimson",
    "#5eaaa8",
    "Purple"
],

最上面是第一層，最下面是第五層，Bracket Pair Colorizer 2 最多可以設定五層自訂顏色，並且支援使用顏色名稱，所以允許出現「Crimson、Purple」等字樣。

我就這樣一直適舒地使用著它，並為此感到滿足，相信這已經是關於這項需求的最佳方案。沒錯，直到 VS Code 將這個功能變成內建！

Native bracket pair colorization in VS Code

在 VS Code 版本號 1.60 的更新資訊文章中，赫然發現了這樣的子標題：High performance bracket pair colorization，其核心內容不外乎就是這句：

The editor now supports native bracket pair colorization:

果然該來的還是要來，這麼重要的功能，當然是 VS Code 自行實作才是最佳方案。

並且就這項更新他們還寫了這篇〈Bracket pair colorization 10,000x faster〉，詳細闡述 bracket pair colorization 的發展以及一直都存在的效能問題。這裡的「效能」指的主要是渲染——也就是為括號上色——的速度，以及開發團隊提出的解決之道，有興趣的讀者可以前往閱讀。

總的來說，從此以後 bracket pair colorization 功能不止被 VS Code 內建了，還得到了渲染效能的巨幅提升，快來用吧！

settings.json 相關設定

好，說了這麼多，其實重點只有一個，那就是從今天開始可以解除安裝 Bracket Pair Colorizer 2，直接設定好 VS Code 內建的 bracket pair colorization 即可，請立即打開 VS Code 的settings.json並新增下列條目：（顏色自選）

2022/05/07更新：
從 VS Code 1.67 版起，bracket pair colorization 已改為「預設開啟」，這意味著下面的第一個設定editor.bracketPairColorization.enabled，除非是要關閉而設定為false，否則可以整行省略。

1
2
3
4
5
6
7
8
9
10
11
12
13
// 開啟 bracket pair colorization；1.67 以上可省略此開啟設定
"editor.bracketPairColorization.enabled": true,
// 設定顏色
"workbench.colorCustomizations": {
    // 層級括號顏色，從 1 至 6 層，此處只設定了 5 層
    "editorBracketHighlight.foreground1": "#7777ff",
    "editorBracketHighlight.foreground2": "#8a2be2",
    "editorBracketHighlight.foreground3": "#DC143C",
    "editorBracketHighlight.foreground4": "#5eaaa8",
    "editorBracketHighlight.foreground5": "#800080",
    // 異常括號的顏色，比如多出來的結尾括號
    "editorBracketHighlight.unexpectedBracket.foreground": "#ffffff",
}

簡單暴力！

有兩件事附帶一提：

  • 內建的 bracket pair colorization 最多可以設 6 層顏色，而這裡我只設了 5 層。
  • 不可以使用顏色名稱：所以原來的「BlueViolet、Crimson」等表示方式已不再可用，我只能乖乖查詢相對應的 HTML 色碼。

番外篇：我的程式顏色美學

說起來打從學程式開始，我對編輯器中的各種 syntax highlight（語法突顯）與編輯器界面，在顏色選擇的合理性與美感都有一定追求，可以稱之為顏色美學。

在此闡述我對 bracket pair colorization 層級顏色設定的一些想法：

  1. 第一層：一半以上的括號屬於第一層，我會使用與函式相近的顏色。因為函式後面很常接括號作為呼叫之用，且第一層比較沒有辨識上的困難，加上出場頻繁，不適合凸顯它，以免版面過於花俏而顯得雜亂。所以搭配和函式相近的顏色，盡量讓它們融為一體。在此我選擇較深的天空藍。
  2. 第二層：往下一層，凸顯的必要性相對提升，我選擇紫色系，明度較前者低但彩度則更高一些。當你看到這個顏色時，表示程式結構層級增加了，可以作為一個提醒。當然，第二層還是很常見的。
  3. 第三層：第三層已屬於深海，值得有意識地減少它，否則勢必影響程式可讀性，畢竟〈Zen of Python〉也提示我們「 Flat is better than nested. 」。所以我選擇鮮明且和前者二者大相逕庭的 Crimson 腥紅色，作為一種「紅色警戒」。
  4. 第四層：使用和第三層的對比色來強調，這裡採綠色系。使用對比色警告自己已觸碰到了合理層級的「底限」，作為 Clean Code 的貫徹者，最好不要再往下。
  5. 第五層以後：只是備用，且應該要極盡所能地少用到。
  6. 異常括號顏色：建議使用任何你覺得很顯眼甚至是刺眼的顏色，通常使用正紅色#ff0000。搭配深色佈景主題時，我也推薦純白色，非常顯眼，很符合需求。

儘管 Python 只以「純縮排」而沒有像其他語言採用常見的「括號 + 縮排」來對程式區塊進行封裝，所以括號顏色在「表現程式結構深度、增加程式可讀性」的作用與效果，相對沒那麼顯著，但還是值得在括號顏色選擇上花一些心思。

前三層括號顏色示意 in Python前三層括號顏色示意 in Python

小結

雖然官方表示 bracket pair colorization 得到了效能上的巨幅提升，但如果你的專案沒有像該篇 blog 中例示的單檔擁有 4 萬行程式碼與大量括號，而只是短短數百行，或者電腦的效能本來就很猛，大概不容易感受到其中的差異。

我實際使用的感覺是：VS Code 一開啟程式專案後，當環境還在讀取、設定，syntax highlight 的顏色也還沒有開始渲染時，所有的括號就已經上色完畢，確實有差！但顯然要複雜一點的情境才會對效能提升更加有感。

無論如何，本著工程師的簡潔信仰，能善用內建的特性，就可以少裝一個套件，至少在「心靈上」可以得到一定的滿足。😌