为什么Prettier与JSX不一致?

Question

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

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

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，这样你就可以减少行首的空白。

例如，您可以尝试添加

"printWidth": 100

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

注意:printWidth设置不是硬限制。把它当作一个首选项。