JSX自动包装总是如此

时间:2017-10-28 03:46:53

标签: visual-studio-code eslint js-beautify prettier

这是我的头脑!花了2个小时试图弄清楚导致以下行为的原因并且一直空白。

我正在迁移到VSCode,我的React JSX组件自动换行到多行。当组件具有多个属性时,这很好(并且很好),但会使某些文件非常长并且非常难以理解。

大概 - 确定反应路由器路由的文件。它们都很小,理想情况下,每行一个使得应用程序的路径非常易读,而不是每7行左右定义一条路径。

VS Code自动将文件格式化为:

的示例
<Authenticated
    path="/new"
    component={NewCorrespondence}
    {...this.props}
/>
<Authenticated
    path="/inbox"
    component={Inbox}
    {...this.props}
/>
<Authenticated
    path="/sent"
    component={Sent}
    {...this.props}
/>

应该是什么样子

<Authenticated path="/new" component={NewCorrespondence} {...this.props} />
<Authenticated path="/inbox" component={Inbox} {...this.props} />
<Authenticated path="/sent" component={Sent} {...this.props} />

VSCode中处理此问题的设置是什么?有没有办法将它配置为仅在长于x个字符的情况下包装这些行?

1 个答案:

答案 0 :(得分:2)

好的,所以回答我自己的问题。它是更漂亮的包printWidth设置。 prettierrc配置文件被忽略了,但是直接从VSCode设置宽度修复了这个。

所以这里的问题是我如何设置配置文件(不同的问题!)。