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

Highlight JSX in TypeScript. #4650

Open
wants to merge 5 commits into
base: main
Choose a base branch
from

Conversation

thesoftwarephilosopher
Copy link
Contributor

@thesoftwarephilosopher thesoftwarephilosopher commented Aug 23, 2024

This PR adds JSX highlighting to TypeScript natively using Monaco's Monarch tokenizer, along with a few other nice to have changes:

  1. Highlight ... as a keyword
  2. Highlight export/etc as control-flow keywords
  3. Highlight class fields
  4. Highlight function/class names
  5. Highlight var/let/const names
  6. Highlight new Foo
  7. Highlight function/method calls
  8. Highlight JSX
  9. Highlight type names as type.identifier

It has been thoroughly tested on https://vanillajsx.com/monarch/ but it would be useful to have more people test for edge cases.

A few unrelated tests are failing such as PHP and Less, which I don't understand how they're related since my code is isolated to one file. The failures look to just be whitespace errors, but it's hard to tell.

I didn't update the TypeScript tests yet, so they're failing too.

],

jsxOpen: [
[/{/, { token: 'keyword', next: '@root.INJSX', bracket: '@open' }],

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @thesoftwarephilosopher, Thank you so much for sharing this token provider file. It's very helpful and straightforward, and it solved my problem very easily!

I noticed a small inconsistency where the first and second brackets had different tokens in some cases. I made a slight modification to make them consistent.
Before:
image
image
After:
image
image

Suggested change
[/{/, { token: 'keyword', next: '@root.INJSX', bracket: '@open' }],
[/{/, { token: 'delimiter.curly', next: '@root.INJSX', bracket: '@open' }],

],

jsxText: [
[/{/, { token: 'keyword', next: '@root.INJSX', bracket: '@open' }],

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
[/{/, { token: 'keyword', next: '@root.INJSX', bracket: '@open' }],
[/{/, { token: 'delimiter.curly', next: '@root.INJSX', bracket: '@open' }],

[/@escapes/, 'string.escape'],
[/\\./, 'string.escape.invalid'],
[/`/, 'string', '@pop']
[/\.\.\./, 'keyword'],

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And I think it would be more fitting to categorize ... as an operator

@raflymln
Copy link

raflymln commented Jan 9, 2025

Hey, is there any followup to this PR? @thesoftwarephilosopher

@thesoftwarephilosopher
Copy link
Contributor Author

@microsoft-github-policy-service agree

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

Successfully merging this pull request may close these issues.

3 participants