HookyQR / VSCodeBeautify

Enable js-beautify (https://github.com/beautify-web/js-beautify) in VS Code
MIT License
606 stars 180 forks source link

React.Fragment formatting problem #342

Open amttls opened 4 years ago

amttls commented 4 years ago

I'm trying to use Beautify to format .jsx files but it seems to have a problem with the React.Fragment shorthand. This can be replicated here: https://beautifier.io/

Provide the settings I use:

settings.json

{
  "beautify.language": {
    "js": {
      "type": ["javascript", "json"],
      "filename": [".jshintrc", ".jsbeautify"],
      "ext": ["js", "json", "ts", "tsx", "jsx"]
    }
  }
}

.jsbeautifyrc

{
  "indent_size": 2,
  "indent_char": " ",
  "max_preserve_newlines": 10,
  "preserve_newlines": true,
  "keep_array_indentation": false,
  "break_chained_methods": false,
  "indent_scripts": "keep",
  "brace_style": "collapse,preserve-inline",
  "space_before_conditional": true,
  "unescape_strings": false,
  "jslint_happy": false,
  "end_with_newline": false,
  "wrap_line_length": 0,
  "indent_inner_html": false,
  "indent_handlebars": true,
  "comma_first": false,
  "e4x": true,
  "indent_empty_lines": true
}

Expected results

<>
  <Row>
    <h5>Foo</h5>
  </Row>
  <Row>
    <h2 className="foo">Foo</h2>
  </Row>
</>

Actual results

<>
  <Row>
    <h5>Foo</h5>
  </Row> <
Row >
    <h2 className="foo">Foo</h2> <
    /Row> <
    />
cfont commented 4 years ago

I'm experiencing this odd problem, too. Hoping to find a solution but had to disable the extension for the time being.