Atom-beautify: unexpected JS formatting

[ali-hellani]

could atom-beautify achieve this Expected Output ? (using React JSX)

Input Before Beautification

This is what the code looked like before:

this.props.navigator.push({name: 'eventDetail', title: rowData.name.text, description: rowData.description.text, url: rowData.url, img: rowData.logo.url});

Expected Output

The beautified code should have looked like this:

this.props.navigator.push({
    name: 'eventDetail', 
    title: rowData.name.text, 
    description: rowData.description.text, 
    url: rowData.url, 
    img: rowData.logo.url
});

Actual Output

The beautified code actually looked like this:

this.props.navigator.push({name: 'eventDetail', title: rowData.name.text, description: rowData.description.text, url: rowData.url, img: rowData.logo.url});

[prettydiff]

Are you using Pretty Diff or JS Beautify. I am sure JS Beautify has an option to do this, but I cannot remember what it is. Possibly, brace-style. Pretty Diff has an option to do this as well: http://prettydiff.com/documentation.xhtml#neverflatten

Please let me know if this helps.

[mksuper1]

How to configure that settings in pretty diff in atom editor?

[prettydiff]

It looks like somebody is actually working on this - https://github.com/Glavin001/atom-beautify/pull/1289

I bet they could use some help. See if you can modify the changes in their pull request so that the unit tests pass or additional test units are added.

[deforder]

@mksuper1

put neverflatten: true

under args in src/beautifiers/prettydiff.coffee (# Prettydiff Arguments)

      # Prettydiff Arguments
      args =
        source: text
        lang: lang
        mode: "beautify"
        neverflatten: true

Note: this block is the one used to setup the argument(Options) before passing to PrettyDiff via API.

[ali-hellani]

i have switched to JS-beautify to try the brace-style option you mentioned above because currently pretty-diff doesn't support this yet but when i hit reformatting it hangs with a popup window (beautification on progress) and nothing happens.

[deforder]

@ali-hellani
With current atom-beautify version(0.29.16), JS-beautify isn't supported JSX yet. it seems the supported version will come with the next release. (reference)

You have to wait until then or try to modify an argument for Pretty Diff by yourself as I mentioned above.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. If this is still an issue, please add a comment. It will be closed if no further activity occurs. Thank you for your contributions.