/subtle-brackets

Underlined matching brackets for VSCode

Primary LanguageTypeScriptMIT LicenseMIT

Subtle Brackets

Logo

Underlined matching brackets and more for Visual Studio Code.

Subtle Brackets @ Visual Studio Marketplace

Subtle Brackets allows custom styling of matching brackets as VSCode currently boxes them, impairing visibility. By default, it applies a subtle light/dark underline to the bracket next to the cursor and its matching pair:

After

You can also customize the style applied to matching brackets:

Settings

Extension Settings

Setting Default Description
subtleBrackets.parse true If true, the document will be properly parsed via Prism, whenever possible, so brackets within strings and comments don't trigger the decoration. There are some edge cases.
subtleBrackets.disableNative true Subtle Brackets permanently disables the native matchBrackets by default. Turn to false to prevent this behavior.
subtleBrackets.bracketPairs ["{}", "[]", "()"] An array of the bracket pairs to match. There must be two characters per string.
subtleBrackets.styles { "global": { "borderWidth": "1px", "borderStyle": "none none solid none" } } Change the styles applied to matching brackets. The default is a light/dark underline (depending on your current theme).

Styles

If you wish, you can change the style applied to matching brackets, and even target specific bracket pairs by creating a key matching that pair in subtleBrackets.styles. For a list of allowed styles check DecorationRenderOptions.

Examples

  • 2px blue underline global style:
"subtleBrackets.styles": { 
    "global": { 
        "borderColor": "blue",
        "borderWidth": "2px"
    }
}
  • Default global style and white font over red background only for "[]" brackets:
"subtleBrackets.styles": {
    "global": {
        "borderWidth": "1px",
        "borderStyle": "none none solid none"
    },
    "[]": { 
        "color": "white",
        "backgroundColor": "red",
        "borderStyle": "none"
    }
}