Skip to content

Template literal ending with label-like pattern (e.g., a:) breaks syntax highlighting #1065

@ThanhNguyxn

Description

@ThanhNguyxn

Summary

Template literal content ending with a pattern that looks like a JavaScript label (e.g., `a:`) breaks syntax highlighting for subsequent code.

This bug was reported in vscode#282423 and affects both JavaScript and TypeScript grammars.

Reproduction

var a = (
  {
    b: function () { return `:` } // ✅ Normal
  }
);

var b = (
  {
    b: function () { return `:a` } // ✅ Normal
  }
);

var c = (
  {
    b: function () { return `::` } // ✅ Normal
  }
);

var d = (
  {
    b: function () { return ` :` } // ✅ Normal
  }
);

var e = (
  {
    b: function () { return `a:` } // ❌ BUG - breaks highlighting
  }
);

console.log("syntax highlighter has error"); // This line is incorrectly highlighted

Expected Behavior

All template literals should highlight correctly, and subsequent code should not be affected.

Actual Behavior

When the template literal ends with a colon preceded by an identifier (matching the label pattern identifier:), subsequent code loses correct tokenization.

Analysis

The pattern a: inside the template literal appears to match the label rule:

{
  "match": "([_$[:alpha:]][_$[:alnum:]]*)\\s*(:)",
  "captures": {
    "1": { "name": "entity.name.label.js" },
    "2": { "name": "punctuation.separator.label.js" }
  }
}

The patterns that work don't match this regex:

  • `:` - No identifier before colon
  • `:a` - Colon comes first
  • `::` - No identifier before first colon
  • ` :` - Space breaks the pattern

Environment

  • VS Code: 1.106.3
  • OS: Windows/macOS
  • Occurs with all extensions disabled

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions