Microsoft/vscode

Bracket Pair Colorization misinterprets double braces {{ }} in Twig templates

Open

#274867 opened on Nov 3, 2025

View on GitHub
 (2 comments) (0 reactions) (1 assignee)TypeScript (74,848 stars) (10,221 forks)batch import
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

  1. Launch VS Code with all extensions disabled (code --disable-extensions).
  2. Create a new file and set the language mode to Twig (or HTML/plain text — same result).
  3. Paste the following code:
    {{ foo }}
    {% if true %}
      {{ bar }}
    {% endif %}
    
  4. Ensure the built-in bracket colorization is enabled:
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs": "active"
    
  5. 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.

Contributor guide