Microsoft/vscode
View on GitHubBracket Pair Colorization misinterprets double braces {{ }} in Twig templates
Open
#274867 opened on Nov 3, 2025
bracket-pair-colorizationfeature-requesthelp wanted
Description
Does this issue occur when all extensions are disabled?: Yes
- VS Code Version: 1.105.1
- OS Version: Windows 11 26100.6899
- Language Mode: Twig
Steps to Reproduce
- Launch VS Code with all extensions disabled (
code --disable-extensions). - Create a new file and set the language mode to Twig (or HTML/plain text — same result).
- Paste the following code:
{{ foo }} {% if true %} {{ bar }} {% endif %} - Ensure the built-in bracket colorization is enabled:
"editor.bracketPairColorization.enabled": true, "editor.guides.bracketPairs": "active" - Observe the colors of the braces inside
{{ ... }}.
Description
The built-in bracket pair colorization treats double curly braces {{ ... }} in Twig templates as two separate bracket pairs instead of a single logical pair.
As a result, the first { and the last } are displayed with different colors (for example, red for {{ and yellow for }}).
This behavior is confusing for templating languages such as Twig, where {{ ... }} represents one atomic expression delimiter.
Expected Behavior
{{ ... }}, {% ... %} and {# ... #} should be interpreted as single logical pairs, and the opening and closing sequences should share the same bracket color.
Actual Behavior
Each individual { and } is colored separately, producing two color cycles:
{ { ... } }
A B B A
Additional Context
- The legacy Bracket Pair Color DLW extension handled these correctly:
{{ ... }}was recognized as one bracket pair and colored consistently. - Since newer versions of VS Code rely entirely on the built-in bracket pair colorization, the DLW extension can no longer override or replace it.
- It would be valuable if the built-in implementation could detect double or triple brace sequences used in templating syntaxes (Twig, Mustache, Handlebars, etc.) and treat them as one logical pair.
Minimal Settings Used
{
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": "active"
}
Notes
- Reproducible on both Stable and Insiders builds.
- Happens even without any Twig extension installed.
- The older DLW extension demonstrated the desired behavior but is no longer configurable in recent VS Code releases.