Microsoft/vscode

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

Open

#274.867 aperta il 3 nov 2025

Vedi su GitHub
 (2 commenti) (0 reazioni) (1 assegnatario)TypeScript (10.221 fork)batch import
bracket-pair-colorizationfeature-requesthelp wanted

Metriche repository

Star
 (74.848 star)
Metriche merge PR
 (Merge medio 11h 43m) (1000 PR mergiate in 30 g)

Descrizione

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.

Guida contributor