JSX support

[davidnewcomb]

Release 1.14 build 1.14.2-17770 (release-1.14.2 f71f00acc) build timestamp: Tue Mar 31 2020 00:41:05 GMT-0700

Brackets Beautify Version: 2.11.0

I'm unable format React Javascript with embedded JSX files. For example:

class Message extends Component {

	render() {
		return <h1> Welcome vistor </h1>;
	}
}

Formats to:

class Message extends Component {

	render() {
		return <h1 > Welcome vistor < /h1>;
	}
}

which breaks my React application.

The files have the .js extension but brackets-beautify treats it as just javascript.

I've had a look and js-beautify supports the JSX syntax in Javascript files but it doesn't appear in this extension.

[bitwiseman]

@davidnewcomb What happens if you change the extension to .jsx?

[davidnewcomb]

I've tried it again with both extensions (.js, .jsx) and the React app worked.

function CheckingSoftwareVersion(props) {

	return (
		<Alert variant="warning">
			<Alert.Heading>Checking...</Alert.Heading>
			<p>Contacting Github to see if you are up to date.</p>
		</Alert>
	)
}

is beautified into

function CheckingSoftwareVersion(props) {

	return ( <
		Alert variant = "warning" >
		<
		Alert.Heading > Checking... < /Alert.Heading> <
		p > Contacting Github to see
		if you are up to date. < /p> <
		/Alert>
	)
}

While it didn't break, it really isn't very beautiful! When the file is big it just looks like a mess! I do the formatting by hand now unfortunately.

I did the same tests with Atom and the results were the same, so I'm happy to say that it's something in the beautifyjs. However, it would be nice to have better options as default.

[bitwiseman]

@davidnewcomb The problem is that the setting for .jsx files doesn't automatically include the e4x=true setting for the beautifier. It defaults to false in all cases. It is up to that caller to enable it.

[bitwiseman]

@davidnewcomb You can turn one e4x in your configuration:

https://github.com/brackets-beautify/brackets-beautify/blob/master/README.md#beautifier-options

[davidnewcomb]

It's already switched on! Here is my config.

{
    "fonts.fontSize": "12px",
    "fonts.fontFamily": "'SourceCodePro-Medium', ＭＳ ゴシック, 'MS Gothic', monospace",
    "wordWrap": false,
    "brackets-eslint.gutterMarks": true,
    "brackets-eslint.useLocalESLint": false,
    "linting.ESLint.collapsed": true,
    "linting.JSLint.collapsed": false,
    "linting.collapsed": true,
    "bb.beautify.onSave": false,
    "tabSize": 8,
    "useTabChar": true,
    "externalApplications": {
        "jpg": "Preview",
        "jpeg": "Preview",
        "png": "Preview",
        "svg": "Brackets",
        "psd": "Gimp"
    },
    "bb.beautify.e4x": true,
    "e4x": true
}

Found another piece that demonstrates the problem. While the formatting of Javascript seems to be quite sensible, the mix of JSX seems to make confused.

import React, {Component} from 'react';

let Counter = () => {

	let col = this.state.count === 0 ? '#ff0000' : '#000000'
	return (
		<div>

		<p style={{color: col}}>count {this.state.count}</p>
		<button onClick={() => this.modFiveCounter(1)}>^</button>
		<button onClick={() => this.modCounter(-1)}>v</button>

		</div>
	)
}

export default Counter

But never in my wildest dreams!

import React, {
	Component
} from 'react';

let Counter = () => {

	let col = this.state.count === 0 ? '#ff0000' : '#000000'
	return ( <
		div >

		<
		p style = {
			{
				color: col
			}
		} > count {
			this.state.count
		} < /p> <
		button onClick = {
			() => this.modFiveCounter(1)
		} > ^ < /button> <
		button onClick = {
			() => this.modCounter(-1)
		} > v < /button>

		<
		/div>
	)
}

export default Counter

[bitwiseman]

Your input works on https://beautifier.io/ with e4x. The e4x setting needs to be put in the .jsbeautifyrc file, which is not the file you're showing above.

[davidnewcomb]

I took the example from https://beautifier.io/ and placed it into ~/.jsbeautifyrc (on my Mac). Here it is:

{
  "indent_size": "4",
  "indent_char": " ",
  "max_preserve_newlines": "5",
  "preserve_newlines": true,
  "keep_array_indentation": false,
  "break_chained_methods": false,
  "indent_scripts": "keep",
  "brace_style": "collapse",
  "space_before_conditional": true,
  "unescape_strings": false,
  "jslint_happy": false,
  "end_with_newline": false,
  "wrap_line_length": "0",
  "indent_inner_html": true,
  "comma_first": false,
  "e4x": true,
  "indent_empty_lines": false
}

I started Brackets loaded Counter file and formatted it. It was the same messy result. I started Atom and it formatted the Counter file correctly (like on beautifier.io).

I shutdown both applications and changed e4x to false.

I started Brackets loaded Counter file and formatted it. It was the same messy result. I started Atom and it formatted the Counter into the same mess as Brackets.