Atom-beautify: react-native files jsx code ~ bad format

[94cstyles]

class weeweefree extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
}

beautify to

class weeweefree extends Component {
    render() {
        return ( < View style = {
                styles.container
            } >
            < Text style = {
                styles.welcome
            } >
            Welcome to React Native!
            < /Text> < Text style = {
                styles.instructions
            } >
            To get started, edit index.ios.js < /Text> < Text style = {
                styles.instructions
            } >
            Press Cmd + R to reload, {
                '\n'
            }
            Cmd + D or shake
            for dev menu < /Text> < /View>
        );
    }
}

indent size = 4
so bad. How do I need to setting?

[prettydiff]

The code is beautified as JavaScript and not JSX. Are you using .js for your file extension instead of .jsx? Pretty Diff is the default beautifier for JSX in Atom Beautify and it appears to be working when I process the sample code at http://prettydiff.com/?m=beautify&l=jsx

[94cstyles]

That's right. The file suffix is .js. But I would like to know the.Js file also supports JSX beautifier how to set up

[prettydiff]

I am not sure how to make the code beautify as JSX with a .js file extension. Maybe @Glavin001 would have some additional information. Saving the file as .jsx would solve this problem though.

[Glavin001]

The Atom file grammar takes precedence over file extension. If you want to use extension .js and be recognized as JSX then you should change your file's grammar within Atom.
See https://github.com/atom/grammar-selector for details.

[prettydiff]

@Glavin001 I looked, but did not see an Atom grammar for JSX format.

[Glavin001]

It wouldn't be built-in to Atom, you will likely have to install a package. This one adds JSX grammar: https://github.com/Icehunter/language-jsx/blob/master/grammars/jsx.cson#L7

This one won't work because the grammar name is different: https://github.com/subtleGradient/language-javascript-jsx/blob/master/grammars/JavaScript%20with%20JSX.cson#L7
So that could be added support for with a pull request changing https://github.com/Glavin001/atom-beautify/blob/master/src/languages/jsx.coffee#L10-L13

[94cstyles]

@Glavin001 @prettydiff Thank you. The problem is solved.

[Glavin001]

Excellent to hear! You're very welcome. Enjoy!

[ewgenius]

@Glavin001 i have the same issue with *.jsx files. I've tryed atom-react and language-jsx for grammars, but always same result, as in first message here:

class Test extends React.Component {
                render() {
                                return <div>
                                                test
                                </div>
                }
}

Also, when i set file extension to .js and grammar to JavaScript, beautifier creates different result:

class Test extends React.Component {
    render() {
        return <div >
            chat < /div>
    }
}

[prettydiff]

@ewgenius The first result is demonstrating correct beautification and the second one is broken. The only problem with the first code sample is the indentation is really big (16 spaces). Have you changed any settings regarding beautification size or use of soft-tabs or anything like that?

[ewgenius]

@prettydiff oh, there was an .editorconfig file in my project with 'tab' seetting for identation, what i have not noticed, so there is no problem now. Thank you for your answer!

[niranjan-b-prajapati]

@TOP-Chao can you please explain how did you solved your problem.

[anhldbk]

@niranjan-b-prajapati : Package language-babel does NOT compatible with my current version of Atom (1.12.2). I removed it and used package react instead. Additionally, I installed page file-types, set file .js extension defaults to JSX via the configuration (menu Edit > Config)

  "file-types":
    js: "source.js.jsx"

It works! Hope this will help you out.

[indivisable]

@anhldbk

Can anyone give full answer to this? Trying to use with react-native / react and not much luck.

So far I tried:

installed atom-beautify
updated 'prettydiff.coffee' neverflatten (https://github.com/Glavin001/atom-beautify/issues/1454)

Getting Atom to recognize JS as JSX language:
installed language-jsx (https://github.com/Icehunter/language-jsx)
installed file-types and configured as instructed above
Also I tried: http://flight-manual.atom.io/using-atom/sections/basic-customization/#customizing-language-recognition:

"*":
  core:
    customFileTypes:
     "source.jsx": [
       "js"
     ]

Cannot seem to get it working well, this would really be helpful :) https://github.com/Glavin001/atom-beautify/issues/1493

[njwangchuan]

Thanks to @Glavin001 ! Just add these package to atom:

https://atom.io/packages/language-javascript-jsx

[tayfunyasar]

I'm also having this problem.

[mpathy]

@tayfunyasar then read the comments about the solution. it has some reason it is closed.

[tibistibi]

i had the same but could do two things:
one is per file change what kind of file it is (in the right bottom of the screen click file type and change it:

or change the format type of js files in the settings: