Shorthand JSX Fragments breaks syntax highlighting

[Svish]

The shorthand version of writing react jsx fragments breaks all the syntax highlighting after its closing tag:

😟

[simonpai]

The last commit of this project was in May 2018.
You can try either Naomi or JS Custom as an alternative.

[fedecarg]

For feature reference, the extension that break JSX in VSCode is: Babel ES6/ES7. It's promoted in the Marketplace as the oficial Babel extension, but it's not.

dzannotti/vscode-babel#23

[scott-ln]

The bug is triggered by the opening tag; changing <> to <x> will restore syntax highlighting to the code outside the fragment.

[IanIsFluent]

The bug is triggered by the opening tag; changing <> to <x> will restore syntax highlighting to the code outside the fragment.

But. That's invalid? How is that a solution!?

Expected corresponding JSX closing tag for 'x'.ts(17002)
Identifier expected.ts(1003)

[scott-ln]

No no, you misunderstand! I was just describing exactly how to trigger the bug.

[IanIsFluent]

No no, you misunderstand! I was just describing exactly how to trigger the bug.

Sorry! I think the party popper reactions suggested this was a solution, not so much the wording of your comment! 😆

[scott-ln]

Haha! Yeah I was pretty surprised to come back here and see those too. After writing that comment I actually ended up switching to Naomi from Simon's suggestion above, it's great.

[icharge]

Set TypeScript React for *.js or *.jsx it worked

[icharge]

Set TypeScript React for *.js or *.jsx it worked

That way will produce a lot of warnings about typing. So better way is adding comment slashes after </>

Before:

After:

Hope this will help.

[Thom1729]

This should be fixed in v10.0.0-beta.1. See #379 for more information on the new release. Please report any problems with v10 in a new issue.

[IPWright83]

@Thom1729 how do you go about installing a beta package to test this?

[Thom1729]

You have to tell Package Control to install prerelease versions of Babel:

1. Run Preferences: Package Control Settings — User from the command palette to open your Package Control settings.
2. Add install_prereleases: ['Babel']. (If you already had install_prereleases, add Babel to the list.)
3. Run Package Control: Upgrade Package and select Babel, or just wait for the next time Package Control checks for new package versions.

[jrandyanderson]

@Thom1729 This worked for me! Thank you.

[MKorostoff]

@Thom1729 this worked for me! thanks!

[williampratt]

Sorry for commenting on a closed issue, but any time frame for a new release to include fixes like this so we don't have to always update to pre-release? Thanks for the solution though @Thom1729!

[sshadmand]

I believe I followed the steps above but still getting errors with "<>" shorthand in Sublime 3.

Note: I've also restarted Sublime 3 and ran an "Upgrade.. All Packages" as well

[williampratt]

@sshadmand, you need to place it in the package control setting file, not Babel's settings.
Go to Preferences -> Package Settings -> Package Control -> Settings - User and add the following:

"install_prereleases": [ "Babel" ],

Then Tools -> Command Palette -> Package Control: Upgrade Package

That should do it!

[sshadmand]

Followed the steps @williampratt. Seems to still throw an error 🤷‍♂️

[williampratt]

What version do you see when you run Package Control: List Packages? I am not seeing the issue in v 10.0.0-beta.2

[woonketwong]

The step works for me.

[larrymoe]

Worked for me. Thanks @williampratt