Microsoft/vscode

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

Open

#274 867 ouverte le 3 nov. 2025

Voir sur GitHub
 (2 commentaires) (0 réactions) (1 assigné)TypeScript (10 221 forks)batch import
bracket-pair-colorizationfeature-requesthelp wanted

Métriques du dépôt

Stars
 (74 848 stars)
Métriques de merge PR
 (Merge moyen 11h 43m) (1 000 PRs mergées en 30 j)

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.

Guide contributeur