使用 React 组件防止 Visual Studio JSX 行为

Question

我正在使用 Visual Studio 构建一个 React Native 应用程序。我还安装了 Prettier 来改进语法。

但每次我添加一个具有多个属性的组件时，它都会转到下一行。我怎样才能防止这种情况并保持我的组件内联？

PS：我已经尝试在 Prettier 中增加“打印宽度”，但它不起作用

Answer 1

你应该检查jsx-max-props-per-lineeslint规则。

您只能使用ESlint 设置该规则，prettier 不提供该选项。

因此，您需要做的是使用 eslint 和 prettier 和 prettier 将格式化查看您的 eslint 规则。

转到File => Preferences => Settings 并在Prettier 扩展中标记Eslint Integration。

对于babel-eslint、eslint 和eslint-plugin-react，您需要npm i -D（有您想要的规则）。

并添加 jsx-max-props-per-line 的规则以及您想要内联的道具数量。

如果您在配置 ESlint 时遇到问题，只需 google 如何在 React Native 中添加 ESlint，有很多教程，这是非常重要和有用的学习内容。