-
Notifications
You must be signed in to change notification settings - Fork 3.6k
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
base: main
Are you sure you want to change the base?
Highlight JSX in TypeScript. #4650
Conversation
Also, this reformatted the file. Not sure why, but it's better this way anyway.
@thesoftwarephilosopher please read the following Contributor License Agreement(CLA). If you agree with the CLA, please reply with the following information.
Contributor License AgreementContribution License AgreementThis Contribution License Agreement (“Agreement”) is agreed to by the party signing below (“You”),
|
], | ||
|
||
jsxOpen: [ | ||
[/{/, { token: 'keyword', next: '@root.INJSX', bracket: '@open' }], |
There was a problem hiding this comment.
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:
After:
[/{/, { token: 'keyword', next: '@root.INJSX', bracket: '@open' }], | |
[/{/, { token: 'delimiter.curly', next: '@root.INJSX', bracket: '@open' }], |
], | ||
|
||
jsxText: [ | ||
[/{/, { token: 'keyword', next: '@root.INJSX', bracket: '@open' }], |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
[/{/, { token: 'keyword', next: '@root.INJSX', bracket: '@open' }], | |
[/{/, { token: 'delimiter.curly', next: '@root.INJSX', bracket: '@open' }], |
[/@escapes/, 'string.escape'], | ||
[/\\./, 'string.escape.invalid'], | ||
[/`/, 'string', '@pop'] | ||
[/\.\.\./, 'keyword'], |
There was a problem hiding this comment.
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
This PR adds JSX highlighting to TypeScript natively using Monaco's Monarch tokenizer, along with a few other nice to have changes:
...
as a keywordexport/etc
as control-flow keywordsIt 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.