This project started on 3 Dec 2016. Now 5 years later, it has become a native feature in VSCode.

This extension has seen wilder success then I could over ever dreamed of, with over 10M+ downloads.

I'm glad so many people found it useful, however it no longer has a purpose entering 2022 so development will no longer continue.

If you enjoyed it, a coffee donation is appreciated:

🎁 Donate 🎁

Merry Christmas and Happy New Year!

(With similar color scheme as this extension)

settings.json

{
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs": "active",
    "editor.guides.bracketPairsHorizontal": "active",
    "editor.guides.highlightActiveIndentation": false,
    "workbench.colorCustomizations": {
        // Bracket colors
        "editorBracketHighlight.foreground1": "#FFD700",
        "editorBracketHighlight.foreground2": "#DA70D6",
        "editorBracketHighlight.foreground3": "#179fff",
        // Inactive guide colors
        "editorBracketPairGuide.background1": "#ffd90080",
        "editorBracketPairGuide.background2": "#CC66CC80",
        "editorBracketPairGuide.background3": "#87CEFA80",
        // Active guide colors
        "editorBracketPairGuide.activeBackground1": "#ffd90080",
        "editorBracketPairGuide.activeBackground2": "#CC66CC80",
        "editorBracketPairGuide.activeBackground3": "#87CEFA80",
    }
}

This extension allows matching brackets to be identified with colours. The user can define which tokens to match, and which colours to use.

Screenshot:

• Differences between v1 and v2?
  • v2 Uses the same bracket parsing engine as VSCode, greatly increasing speed and accuracy. A new version was released because settings were cleaned up, breaking backwards compatibility.

"bracket-pair-colorizer-2.colors"
Define the colors used to colorize brackets. Accepts valid color names, hex codes, and rgba() values.

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

"bracket-pair-colorizer-2.forceUniqueOpeningColor"

"bracket-pair-colorizer-2.forceIterationColorCycle"

"bracket-pair-colorizer-2.colorMode"
Consecutive brackets share a color pool for all bracket types
Independent brackets allow each bracket type to use its own color pool

"bracket-pair-colorizer-2.highlightActiveScope"
Should the currently scoped brackets always be highlighted?

"bracket-pair-colorizer-2.activeScopeCSS"
Choose a border style to highlight the active scope. Use {color} to match the existing bracket color
It is recommended to disable the inbuilt editor.matchBrackets setting if using this feature

"bracket-pair-colorizer-2.activeScopeCSS": [
    "borderStyle : solid",
    "borderWidth : 1px",
    "borderColor : {color}",
    "opacity: 0.5"
]

"bracket-pair-colorizer-2.showBracketsInGutter"
Show active scope brackets in the gutter

"bracket-pair-colorizer-2.showBracketsInRuler"
Show active scope brackets in the ruler

"bracket-pair-colorizer-2.rulerPosition"
Decoration position in the ruler

"bracket-pair-colorizer-2.showVerticalScopeLine"
Show a vertical line between the brackets? Enabled by default

"bracket-pair-colorizer-2.showHorizontalScopeLine"
Show a horizontal line between the brackets? Enabled by default

"bracket-pair-colorizer-2.scopeLineRelativePosition"
Disable this to show the vertical line in column 0

"bracket-pair-colorizer-2.scopeLineCSS"
Choose a border style to highlight the active scope. Use {color} to match the existing bracket color

"bracket-pair-colorizer-2.scopeLineCSS": [
    "borderStyle : solid",
    "borderWidth : 1px",
    "borderColor : {color}",
    "opacity: 0.5"
]

"bracket-pair-colorizer-2.excludedLanguages"
Exclude a language from being colorized

These commands will expand/undo the cursor selection to the next scope

"bracket-pair-colorizer-2.expandBracketSelection"
"bracket-pair-colorizer-2.undoBracketSelection"

Quick-start:

{
    "key": "shift+alt+right",
    "command": "bracket-pair-colorizer-2.expandBracketSelection",
    "when": "editorTextFocus"
},
{
    "key": "shift+alt+left",
    "command": "bracket-pair-colorizer-2.undoBracketSelection",
    "when": "editorTextFocus"
}