JSX 总是自动换行

Question

这让我很头疼！花了 2 个小时试图找出导致以下行为的原因并不断出现空白。

我正在迁移到 VSCode，我的 React JSX 组件会自动换行。当一个组件具有多个属性时，这很好（而且很好），但会使一些文件非常长且非常不可读。

例子 - 定义 React 路由器路由的文件。它们都很小，理想情况下，每行一个可以使您的应用程序的路由非常易读，而不是每 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 个字符时换行？

Answer 1

好的，所以回答我自己的问题。这是更漂亮的包的 printWidth 设置。 prettierrc 配置文件被忽略，但直接设置宽度形式 VSCode 解决了这个问题。

所以这里的问题是我如何设置配置文件（不同的问题！）。

JSX 总是自动换行

JSX auto-wrapping always

eslint

js-beautify

visual-studio-code

prettier