Microsoft/vscode

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

Open

#274.867 aberto em 3 de nov. de 2025

Ver no GitHub
 (2 comments) (0 reactions) (1 assignee)TypeScript (10.221 forks)batch import
bracket-pair-colorizationfeature-requesthelp wanted

Métricas do repositório

Stars
 (74.848 stars)
Métricas de merge de PR
 (Mesclagem média 11h 43m) (1.000 fundiu PRs em 30d)

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.

Guia do colaborador