problem formatting jsx

• Operating System (+Version): windows 10
• VS Code Version: 1.11.2
• beautify Version: 1.0.2

It seems that the beautify is not formatting those code in the render for react code.

e.g. import React, { Component } from ‘react’;

class Welcome3 extends Component { constructor(props) { super(props);

    this.state = {            data: 'initial data',
        test: 1
    }
}

render() {
    return (
        <div>              Welcome3 {this.props.name }                <button onClick=  {this.updateState}>Click to update data</button>
            <h4>state.data: {this.state.data}</h4>
        </div>
    );
}

}

after formatting import React, { Component } from ‘react’;

class Welcome3 extends Component { constructor(props) { super(props);

    this.state = {
        data: 'initial data',
        test: 1
    }
}

render() {
    return (
        <div>              Welcome3 {this.props.name }                <button onClick=  {this.updateState}>Click to update data</button>
            <h4>state.data: {this.state.data}</h4>
        </div>
    );
}

}

code in the render are not formatted. Any settings to solve the problem?

my .jsbeautifyrc { “e4x”: true, // Pass E4X xml literals through untouched // “brace_style”: “collapse-preserve-inline”, “brace_style”: “collapse,preserve-inline”, “break_chained_methods”: false, // Break chained method calls across subsequent lines “end_with_newline”: true, // End output with newline, default false // “indent_char”: " ", // Indentation character // “indent_level”: 0, // Initial indentation level // “indent_size”: 4, // Indentation size “indent_with_tabs”: false, // Indent with tabs, overrides indent_size and indent_char “jslint_happy”: false, // If true, then jslint-stricter mode is enforced “keep_function_indentation”: false, // Preserve function indentation “max_preserve_newlines”: 10, // Maximum number of line breaks to be preserved in one chunk (0 disables) “preserve_newlines”: true, // Whether existing line breaks should be preserved “space_after_anon_function”: false, // Should the space before an anonymous function’s parens be added, “function()” vs “function ()” “space_before_conditional”: true, // Should the space before conditional statement be added, “if(true)” vs “if (true)” “space_in_empty_paren”: false, // Add padding spaces within empty paren, “f()” vs “f( )” “space_in_paren”: false, // Add padding spaces within paren, ie. f( a, b ) “unescape_strings”: false, // Should printable characters in strings encoded in \xNN notation be unescaped, “example” vs “\x65\x78\x61\x6d\x70\x6c\x65” “wrap_line_length”: 0, // Lines should wrap at next opportunity after this number of characters (0 disables)

// common settings used by both jsbeautify and prettydiff
"keep_array_indentation": true // Preserve array indentation

}

[leefernandes]

adding a .jsbeautifyrc file with

{
    "e4x": true
}

fixed my issues where beautify was breaking jsx formats in my .js files.

[donpinkus]

Does not work for me.

1.18.1

Before:

After: