Atom-beautify: jsx - wrap attributes

[ali-hellani]

Hi,

would you please add an option to wrap component attributes in JSX (one attribute per line) along with wrap-attributes-indent-size option

Input Before Beautification

This is what the code looked like before:

<TextInput style={styles.input} placeholder='city ...' onChangeText={(text) => this.setState({city: text})}/>

Expected Output

The beautified code should have looked like this:

<TextInput 
  style={styles.input} 
  placeholder='city ...' 
  onChangeText={(text) => this.setState({city: text})}
/>

Thanks in advance.

[prettydiff]

The latest version of Pretty Diff already does this : http://prettydiff.com/ (drop var a= at the front of the code sample so that the tool thinks its JSX instead of XML)

I just need to get it into Atom Beautify. On a side note I believe JSX format is JavaScript that allows islands of XML. If I am wrong please let me know.

[ali-hellani]

good to know that, waiting for the upcoming release.

regarding the side note: actually JSX is converted back into JavaScript.

[prettydiff]

I know JSX compiles into JS, but I am not sure if JSX can be expressed without JavaScript external to the markup tags. I will look into this, because if it is true then I have some work to do.

[sgaestel]

@prettydiff Hi. Do you have any idea when this will be available in Atom Beautify ?

[prettydiff]

Yeah, Atom Beautify gets Pretty Diff from NPM. Pretty Diff last updated to there as version 1.16.37 about a year ago. I have built a replacement distribution scheme. I will recommend its inclusion to Atom Beautify soon. See https://github.com/Glavin001/atom-beautify/issues/881#issuecomment-275969938

The goal here is to invert dependency management. NPM forces the user to download each dependency in either the latest version or a specific version defined by the dependent application. In my opinion the user should have to download 2 files to get an application: a zip and a hash file. Dependency management and version control should be managed by the publisher so that the user just requests the application and it automatically works without configuration or additional assets like games off of Steam.

[ali-hellani]

any update/progress on this ?

[prettydiff]

@ali-hellani The enabling issue is https://github.com/prettydiff/prettydiff/issues/409 and I will work this immediately after resolution of https://github.com/prettydiff/prettydiff/issues/268 which I am a good way through.

[ali-hellani]

Good to know that and thanks for your efforts.

[Glavin001]

https://github.com/Glavin001/atom-beautify/pull/1520 has been merged.

Published to v0.29.18

[markhowellsmead]

How can I implement this? There's no option in the settings panel that I can see, and adding force_attribute: true directly to the config.cson doesn't have any effect.

[prettydiff]

I don't think the force_attribute is available to Atom Beautify yet. Atom Beautify is currently using an older version of Pretty Diff.