How to format code of react native in atom

Question

I am working on react-native app. I am using atom text editor for the development of react-native apps.

I did not find any shortcut to format react-native code in atom. I tried beautify package https://atom.io/packages/atom-beautify but it is not working.

import React, {
    Component
} from 'react';
import {
    AppRegistry,
    Image,
    View,
    Text,
    Button,
    StyleSheet
} from 'react-native';

class SplashScreen extends Component {
    render() {
        return ( <
            View style = {
                styles.container
            } >
            <
            Image source = {
                require('./img/talk_people.png')
            }
            style = {
                {
                    width: 300,
                    height: 300
                }
            }
            /> <
            Text style = {
                {
                    fontSize: 22,
                    textAlign: 'center',
                    marginTop: 30
                }
            } > Never forget to stay in touch with the people that matter to you. < /Text> <
            View style = {
                {
                    marginTop: 30
                }
            } > < Button title = "CONTINUE"
            color = "#FE434C" / > < /View> <
            /View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#FFFFFF',
        margin: 50,
        alignItems: 'center',
        flex: 1,
        flexDirection: 'column'
    }
})

AppRegistry.registerComponent('Scheduled', () => SplashScreen);

Answer 1

I highly recommend prettier-atom.

Prettier has been getting a lot of attention lately, and for a good reason.

It's a very straight forward, opinionated JavaScript formatter with a limited set of options to suit your style. It also comes with an optional ESLint integration if you need more control.