Skip to content

typescript-basics: fix highlighting for triple-slash reference directives with preserve="true" #1066

@jeffy-g

Description

@jeffy-g

Does this issue occur when all extensions are disabled?: Yes

  • versions
Version: 1.108.2
Commit: c9d77990917f3102ada88be140d28b038d1dd7c7
Date: 2026-01-21T13:52:09.270Z
Electron: 39.2.7
ElectronBuildId: 12953945
Chromium: 142.0.7444.235
Node.js: 22.21.1
V8: 14.2.231.21-electron.0
OS: Windows_NT x64 10.0.19045

Problem

TypeScript supports preserve="true" on triple-slash reference directives, e.g.

/// <reference path="../communication-api.d.ts" preserve="true" />

However, VS Code's bundled TypeScript TextMate grammar fails to recognize the directive when preserve="true" is present, causing the line to be tokenized as a regular line comment instead of a reference directive.

Expected behavior

/// <reference ... /> should be tokenized/highlighted as a reference directive regardless of the presence of preserve="true".

Actual behavior

When preserve="true" is present, the entire line is highlighted as a regular line comment (directive tokenization does not apply).

Repro

  1. Open a .ts file in VS Code
  2. Add the following baseline line (this is highlighted as a reference directive):
/// <reference path="../communication-api.d.ts" />
  1. Now add preserve="true" (this becomes a regular comment highlight):
/// <reference path="../communication-api.d.ts" preserve="true" />
  1. Observe that only the preserve="true" form loses directive highlighting.

Evidence (Inspect Editor Tokens and Scopes)

Without preserve="true"

  • textmate scopes:
    • punctuation.definition.comment.ts
    • comment.line.triple-slash.directive.ts
    • source.ts
    • comment.line
Image

With preserve="true"

  • textmate scopes:
    • comment.line.double-slash.ts
    • source.ts
    • comment.line
Image

Potential fix

Update extensions/typescript-basics/syntaxes/TypeScript.tmLanguage.json under repository/directives to allow the optional preserve="true" attribute in /// <reference ... /> directives.

This makes directives with preserve="true" highlight consistently with the existing path/types/lib reference directives.

Notes

  • The change is limited to the directive-matching pattern and does not affect general comment tokenization.
  • Handles common spacing variants (e.g. preserve="true"/> and preserve="true" />).

Tests

  • Manual verification in VS Code:

    • /// <reference path="..." /> (unchanged)
    • /// <reference path="..." preserve="true" /> (now highlighted as directive)
    • Same for types and lib forms
  • (Optional) Add/adjust a colorize fixture under extensions/typescript-basics/test/colorize-fixtures/ to cover the preserve="true" case.

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