Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
jinliming2 opened this issue Oct 25, 2024 · 4 comments

Comments

@jinliming2
Copy link

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

@RedCMD
Copy link

RedCMD commented Oct 25, 2024

workaround can be to remove the space before =
Image

@jinliming2
Copy link
Author

jinliming2 commented Oct 25, 2024

workaround can be to remove the space before =

@RedCMD Yes, but not all scenarios allow removing =, for example:

const func = <T = string,>(args?: T): T[] => {
  return args === undefined ? [] : [args];
};
const emptyStringArr = func();
const emptyNumberArr = func<number>();

Image

@RedCMD
Copy link

RedCMD commented Oct 25, 2024

but not all scenarios allow removing =

@jinliming2 removing the space , not the equals
however TS will auto format the space back in

caused by #jsx being higher than #arrow-function
Image

jsx-tag-in-expression:
Image

arrow-function:
Image

@jinliming2
Copy link
Author

@RedCMD Yes, it seems that removing the space after the generic parameter can eliminate the error, but the lint rule will automatically format it and add the space back. I have to disable the lint rule for this line.

@mjbvz mjbvz transferred this issue from microsoft/vscode Oct 29, 2024
@mjbvz mjbvz removed their assignment Oct 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants