microsoft / microsoft/TypeScript-TmLanguage

Code Highlighting Broken for Generic Functions with Default Values in .tsx Files

Open
#1,042 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
471
Forks
149
PR merge metrics
No merged PRs in 30d

Description

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

  • Version: 1.95.0-insider
  • Commit: 804f450ca900d24db25e7174e8b6dfb3fb2a318c
  • Date: 2024-10-22T13:30:10.100Z
  • Electron: 32.2.1
  • ElectronBuildId: 10427718
  • Chromium: 128.0.6613.186
  • Node.js: 20.18.0
  • V8: 12.8.374.38-electron.0
  • OS: Darwin x64 24.0.0

Describe the bug
In VSCode, when writing a generic function with default values in a .tsx file, code highlighting is broken and colors are displayed incorrectly. The same code works fine in a .ts file.

To Reproduce

  1. Open VSCode and create a new .tsx file.
  2. Write the following code:
const func = <T = string,>(args: T): string => {
  const t = typeof args;
  if (typeof t === 'string') {
    return t.split(',').join('_');
  }
  return '';
};
func('');

const add = (a: number, b: number) => {
  return a + b;
};
  1. Observe the code highlighting.

Expected behavior
Code highlighting should work correctly and match the behavior in .ts files.

Screenshots
In .tsx file:
Image
Pay attention to the screenshot where the generic default parameter definitions, colons, and arrow function arrows are all highlighted in red, while the colors of keywords such as const, if, and return are incorrect.

In .ts file:
Image

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the example in a .tsx file and compare its highlighting with the same code in a .ts file. Inspect the TypeScript TextMate grammar rules for generic parameters with default values and arrow functions; done means the .tsx colors match the expected TypeScript highlighting without affecting the existing .ts behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
tooling
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.