How to Highlight Matching Brackets in VS Code

Visual Studio Code (VS Code) uses a combination of built-in features, such as native bracket pair colorization, cursor-based highlighting, and active guides, to help developers identify matching parentheses, square brackets, and curly braces. This article explains the mechanics behind how VS Code visualizes matching brackets and outlines the specific settings you can use to customize this behavior for a more efficient coding workflow.

Native Bracket Pair Colorization

VS Code features a highly optimized, built-in engine for bracket pair colorization. Instead of relying on slow regular expressions or third-party extensions, VS Code uses a specialized tree data structure (a 2-3 tree) to parse and track brackets incrementally as you type.

This engine automatically assigns matching colors to corresponding pairs of curly braces {}, parentheses (), and square brackets []. When you nest brackets, the editor cycles through a predefined palette of colors, making it easy to identify which closing bracket belongs to which opening bracket.

To ensure this feature is enabled, you can add or verify the following line in your settings.json file:

"editor.bracketPairColorization.enabled": true

Cursor-Adjacent Highlighting

In addition to colorization, VS Code automatically highlights the matching partner of any bracket your cursor is currently touching. When you position the cursor immediately before or after a bracket, both that bracket and its matching counterpart are highlighted with a subtle background box or border.

This behavior is controlled by the editor.matchBrackets setting. You can configure how and when this highlight appears using these options:

• "always": Highlights matching brackets whenever the cursor is next to one (default).
• "near": Highlights matching brackets only if they are near the cursor.
• "never": Disables cursor-adjacent highlighting entirely.

Example configuration:

"editor.matchBrackets": "always"

Bracket Pair Guides

To help navigate deeply nested code blocks, VS Code can render vertical and horizontal guidelines that connect matching brackets. These guides trace the scope of your code, making it clear where a block begins and ends, even if the matching brackets are separated by hundreds of lines of code.

You can configure bracket pair guides using the following settings:

• "editor.guides.bracketPairs": Enables vertical lines connecting matching brackets. You can set this to true, false, or "active" (which only shows guides for the block where your cursor is currently located).
• "editor.guides.bracketPairsHorizontal": Enables horizontal lines that underline the opening bracket when the matching closing bracket is out of view.

Example configuration:

"editor.guides.bracketPairs": "active",
"editor.guides.bracketPairsHorizontal": true

How to Access and Change These Settings

To modify these settings directly in the VS Code user interface:

1. Open the Settings editor using the shortcut Ctrl+, (Windows/Linux) or Cmd+, (macOS).
2. Type “bracket” into the search bar at the top of the Settings tab.
3. Check or uncheck the boxes corresponding to bracket colorization, match brackets, and bracket pair guides according to your preference.