🎄 Christmas Notice ☃️

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.

However since native functionality is available, it's time to deprecate this extension

If you enjoyed it, a coffee donation is appreciated:

Merry Christmas and Happy New Year!

🎁 Donate 🎁

How to enable native bracket matching:

settings.json

{
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs":"active"
}

Bracket Pair Colorizer

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

Screenshot:

Release Notes

Features

User defined matching characters

By default (), [], and {} are matched, however custom bracket characters can also be configured.

A list of colors can be configured, as well as a specific color for orphaned brackets.

Language support provided by Prism.js: http://prismjs.com/#languages-list

Settings

"bracketPairColorizer.timeOut"
Configure how long the editor should be idle for before updating the document.
Set to 0 to disable.

"bracketPairColorizer.forceUniqueOpeningColor"

"bracketPairColorizer.forceIterationColorCycle"

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

"bracketPairColorizer.highlightActiveScope"
Should the currently scoped brackets always be highlighted?

"bracketPairColorizer.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

Tip: Add the value "backgroundColor : {color}" to increase visibility

"bracketPairColorizer.showBracketsInGutter"
Show active scope brackets in the gutter

"bracketPairColorizer.showBracketsInRuler"
Show active scope brackets in the ruler

"bracketPairColorizer.rulerPosition"
Decoration position in the ruler

"bracketPairColorizer.showVerticalScopeLine"
Show a vertical line between the brackets? Enabled by default

"bracketPairColorizer.showHorizontalScopeLine"
Show a horizontal line between the brackets? Enabled by default

"bracketPairColorizer.scopeLineRelativePosition"
Disable this to show the vertical line in column 0

"bracketPairColorizer.scopeLineCSS"
Choose a border style to highlight the active scope. Use {color} to match the existing bracket color

"bracketPairColorizer.consecutivePairColors"
A new bracket pair can be configured by adding it to the array.
Note: Pair must be supported punctuation type by Prism.js

"bracketPairColorizer.independentPairColors"
A new bracket pair can be configured by adding it to the array.
Note: Pair must be supported punctuation type by Prism.js

"bracketPairColorizer.excludedLanguages"
Exclude languages from being parsed by this extension

Commands

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

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

Quick-start:

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

HTML Configuration

An example configuration for HTML is:

    "bracketPairColorizer.consecutivePairColors": [
        ["<", "</"],
        ["<", "/>"],
        [
            "Gold",
            "Orchid",
            "LightSkyBlue"
        ],
        "Red"
    ]

pakerchang / BracketPair