search

joshpeng / Sublime-Babel-VSCode

Sublime Text's babel-sublime grammar in VS Code.
MIT License
49 stars 16 forks source link

Syntax highlighting broken when using ES6 arrow function's implicit return to return JSX #4

Closed matthamil closed 7 years ago

matthamil commented 7 years ago

From https://github.com/Microsoft/TypeScript-TmLanguage/issues/401

Steps to Reproduce:

  1. Create a .js file, and write some JSX in it like so:

image

  1. Use an arrow function to implicitly return JSX.

  2. Watch as the syntax highlighting below breaks.

This only breaks when the JSX is implicitly returned with the ES6 arrow function. If you wrap the JSX in parens, the syntax highlighting is not broken:

image

Using the arrow function and using an explicit return fixes the syntax highlighting as well:

image

joshpeng commented 7 years ago

@matthamil Thanks for the report. Which color theme are you using?

matthamil commented 7 years ago

@joshpeng https://marketplace.visualstudio.com/items?itemName=joshpeng.theme-charcoal-oceanicnext

joshpeng commented 7 years ago

@matthamil This was pretty nasty. I committed a potential fix to the arrow-implicit-return branch. Can you please try it out locally on your end and provide feedback? To test, grab the sublime-babel.json file and replace the current version in your VS Code extensions folder. You may need to restart VS Code afterwards.

Windows: %USERPROFILE%\.vscode\extensions\joshpeng.sublime-babel-vscode-0.2.3\syntaxes Mac/Linux: ~/.vscode/extensions/joshpeng.sublime-babel-vscode-0.2.3/syntaxes

matthamil commented 7 years ago

:tada: I think that fixed it

joshpeng commented 7 years ago

Aw crap. Just noticed it doesn't fully work when two or more tags are used.

joshpeng commented 7 years ago

@matthamil Did another commit. Can you please try again? Something like this should have all the tags highlighted the same color now. If you run across any other scenarios where this might be broken please let me know. Thanks.

org => <UserOrganizationItemContainer><Blah><zxclk>fdsa</zxclk></Blah></UserOrganizationItemContainer>

matthamil commented 7 years ago

It works unless you nest the same type of element like so:

The first example is nesting 3 <div> tags. The second example nests varied tags.

image

EDIT: and just to make sure it wasn't the parens around the p parameter in the .map() callback, here's the same line without the parens:

image

joshpeng commented 7 years ago

@matthamil Pushed another commit. Please try again. Thanks for all the testing help. sublime-babel.json

Edit: Please hold. Saw something again.....

matthamil commented 7 years ago

Sure thing, thanks for maintaining this project :tada:.

joshpeng commented 7 years ago

@matthamil One last time haha. I reverted the previous commit and put in another approach. Fingers crossed. The earlier issue was leaking tokens and messing up closing ) and } brackets.