Find a way to support JSX until the JS-beautify library does

[victorporof]

I'm sure there's formatted out there that support jsx. We could potentially use those when detecting jsx syntax, until support is added to js-beautify.

[vedraan]

@victorporof did you try https://github.com/jdc0589/JsFormat

It indents ES6 quite nicely. I use it for ES6 projects together with Sublime-HTMLPrettify (they have different keyboard shortcuts). In this case I use Sublime-HTMLPrettify for HTML/CSS/LESS and JsFormat for ES6 files.

[yashvekaria]

There is a setting in the HTML-CSS-JS Prettify plugin that allows you to ignore xml syntax in the js/jsx file. That way it doesn't mess up the jsx code. The setting is: "e4x": true in the "js" section of the settings file

Go to: Preferences > Package Settings > HTML\CSS\JS Prettify > Set Prettify Preferences
Go to "js" section:

Add "jsx" to the "allowed_file_extension", and then change "ex4" to "true"

[klioen]

@yashvekaria it doesn't work for me

[vinaynb]

@yashvekaria 's solution works for me.

[bitwiseman]

@victorporof - js-beautify does support jsx. As @yashvekaria noted, setting e4x=true should do the trick.

[cviebrock]

I've tried @yashvekaria 's solution, and the package still mangles the HTML code in my JSX files. Is it maybe something to do with the version of js-beautify? I don't have it installed globally, and digging in this packages contents, the bundled version seems to be 1.6.2. Latest as of today is 1.6.4, which includes a fix for some JSX formatting: beautifier/js-beautify#914

[victorporof]

#374 updates jsbeautifyrc to the latest version, possibly fixing this issue for everyone. Please reopen if not.

[kevde]

Hi, I think it would be better if JSX can also be formatted (like with indentation). AS of the moment, what e4x=true only bypass codes and not actually linting it in indentation.

[victorporof]

Support for JSX is now enabled by default!! https://github.com/victorporof/Sublime-HTMLPrettify/releases