Why is Prettier being inconsistent with JSX?-CodePudding

Pettier is formatting my code three different ways (React Native JSX).

I'm using the tailwind-rn package to use Tailwind in React Native. Prettier has formatted styling code three different ways:

<View
    style={tailwind('flex flex-row justify-center mt-10')}>

<View style={tailwind('flex flex-col mt-6')}>

<Text
    style={tailwind( 
        'text-primary-text-dark font-medium ml-1'

My config file is as follows:

{
"singleQuote": true,
"jsxSingleQuote": true,
"tabWidth": 4,
"semi": false,
"bracketSpacing": true,
"bracketSameLine": true,
"singleAttributePerLine": false
}

This is the code 'in full'

                <View
                    style={tailwind('flex flex-row justify-center mt-10')}> //dropped one line
                    <TouchableOpacity
                        onPress={() => {
                            actionSheetRef.current?.setModalVisible()
                        }}
                        style={tailwind('w-32 h-32 rounded-full')}>
                        {!selectedImage ? (
                            <Image
                                source={require('assets/avatar-generic.png')}
                                style={tailwind('w-32 h-32 rounded-full')}
                            />
                        ) : (
                            <Image
                                source={{ uri: selectedImage.localUri }}
                                style={tailwind('w-32 h-32 rounded-full')}
                            />
                        )}
                    </TouchableOpacity>
                </View>

                <View style={tailwind('flex flex-col mt-6')}> // no line dropped
                    <Text
                        style={tailwind(  // line dropped
                            'text-primary-text-dark font-medium ml-1' // line dropped again
                        )}>
                        Name
                    </Text>

Any idea why this is happening, or how to enforce number 2? Many thanks.

CodePudding user response：

Prettier has a default print width of 80 characters. Try playing around with that and see what makes sense to you. You can also reduce the tabWidth, so that you get less white space at the beginning of your lines.

For example, you can try adding

"printWidth": 100

to your prettier config, and see if that changes anything.

For the record: the printWidth setting is not a hard limit. Treat it more like a preference.