standard -F doesn't format JSX blocks very well

[mblakele]

Test case, in deliberately non-standard style:

// test case for jsx

var React = require('react')
const ReactDOM = require('react-dom')

function test(text) {
    let container = document.querySelector("#test")
    if (!container) { throw new Error("missing container #test") }
    ReactDOM.render(
        <div className="something" id="body">
            {text}
        </div>,
        container
    )
}

test()

// end

Output from standard -F (5.4.1):

   7:42  error  Strings must use singlequote     quotes
   8:37  error  Strings must use singlequote     quotes
  10:20  error  Unexpected usage of doublequote  jsx-quotes
  10:35  error  Unexpected usage of doublequote  jsx-quotes

That all looks fine. Now let's look at the file:

// test case for jsx

var React = require('react')
const ReactDOM = require('react-dom')

function test (text) {
  let container = document.querySelector('#test')
  if (!container) { throw new Error('missing container #test') }
  ReactDOM.render(
    <div className="something" id="body">
            {text}
        </div>,
    container
  )
}

test()

// end

I see two problems:

• output still uses double-quotes in the JSX
• JSX indentation is sub-optimal

Expected output:

// test case for jsx

var React = require('react')
const ReactDOM = require('react-dom')

function test (text) {
  let container = document.querySelector('#test')
  if (!container) { throw new Error('missing container #test') }
  ReactDOM.render(
    <div className='something' id='body'>
      {text}
    </div>,
    container
  )
}

test()

// end

[bcomnes]

Hey @mblakele. I've attempted to address some of these issues standard-format by enabling https://www.npmjs.com/package/esformatter-jsx. These changes are avaialble in https://www.npmjs.com/package/standard-format ^2.0.0. There are still some issues with it, but it should provide improved formatting with code that contains JSX blocks. We haven't bumped the version within standard yet, but if you have time and would like to help out, giving standard-format@latest a shot and letting us know what you think would be really helpful.

[bcomnes]

Moved to maxogden/standard-format#99