Js-beautify: Make ending bracket on a new line

[fab1an]

Is it possible to format HTML/JSX like this:

<div
    className="test"
    style={{
        height: "100px"
    }}
>                               <----- on a new line
    Something
</div>

At the moment I get

<div
     className="test"
     style={{
                height: "100px"                    <----- too much indentation
            }}>                                  <--- ">" symbol not on a new line
  Something
</div>

I use the esformatter-jsx, which uses js-beautify to format JSX.

Many thanks.

[bitwiseman]

It looks like that project does not use js-beautify. Have you filed an issue in that project?

[fab1an]

Oh, I use a plugin for that project esformatter-jsx. I filed an issue there: https://github.com/royriojas/esformatter-jsx/issues/67

The README says it forwards all html-formatting to js-beautify though…

[bitwiseman]

I think the README is out of date.

[fab1an]

Why do you think that?

[callmevlad]

@bitwiseman It does look like that projects depends on js-beautify: https://github.com/royriojas/esformatter-jsx/blob/master/package.json#L60

[bitwiseman]

Ah. Okay. 😄 Well, the formatting you suggest is not currently part of the beautifier. I've marked it as a future enhancement.

[fab1an]

Thanks!

[fab1an]

Oh, nevermind I just found out that eslint has a rule for exactly this: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md

[miguelmota]

+1 for make ending bracket on a new line feature