为什么更漂亮的不符合JSX？

Question

Pettier是格式化我的代码的三种不同的方式(反应本机JSX)。

我正在使用的顺风-rn包使用尾风在反应本地人。Prettier有三种不同的格式化样式代码：

1.

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

1. ​

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

1. ​

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

我的配置文件如下所示：

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

这是“完整”的代码

                <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>

知道为什么会发生这种事吗，或者如何执行第二条？非常感谢。

Answer 1

“漂亮”的默认打印宽度为80个字符。试着玩一玩，看看什么对你有意义。您还可以减少tabWidth，以便在行开始时获得更少的空白。

例如，您可以尝试添加

"printWidth": 100

到您更漂亮的配置，看看是否有任何改变。

记录在案: printWidth设置不是硬限制。把它看作是一种偏好。