为什么 Prettier 与 JSX 不一致？

Question

Pettier 正在用三种不同的方式格式化我的代码 (React Native JSX)。

我正在使用 tailwind-rn 包在 React Native 中使用 Tailwind。 Prettier 以三种不同的方式格式化样式代码：

1.

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

我的配置文件如下：

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

这是代码'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>

知道为什么会这样，或者如何执行第 2 条？非常感谢。

Answer 1

Prettier 的默认打印宽度为 80 个字符。试着玩弄它，看看什么对你有意义。您还可以减少 tabWidth，这样行首的白色就会减少 space。

例如，您可以尝试添加

"printWidth": 100

到你更漂亮的配置，看看它是否改变了什么。

郑重声明：printWidth 设置不是硬性限制。更像是一种偏好。

为什么 Prettier 与 JSX 不一致？

Why is Prettier being inconsistent with JSX?

jsx

react-native

prettier