React / JSX 中推荐的字符行长度

Question

我知道 React 社区非常专注于创建好的模式，并且 我一直在 React 论坛、github、文章中搜索，但找不到任何关于 jsx 代码的“优化”行长度的提及。

• 在 eslint-config-react-app 中没有覆盖 ESLint max-len 规则。
• ESLint max-len 似乎默认为 80 个字符 长，但这仅适用于原始 javascript。

鉴于 JSX 是一种不同类型的代码（它包含可能需要更多字符的 HTML 标记），React 社区对此有什么建议吗？

编辑

找到Airbnb React/JSX Style Guide，这似乎被很好地接受了，但没有提到行长。 我也想知道你的经历。

Answer 1

据我所知，在 React 社区中，对于

JSX

代码行的最大数量没有事实上的最佳实践。你可以自己调整。

在我们的项目中，我们为一个函数做了大约 20 行。如果

JSX

代码超过阈值，我们认为组件过于臃肿并将其重构为更小的组件。

eslint-plugin-react

也值得尝试降低 JSX 代码的复杂性。

1. eslint-plugin-react/jsx-max-depth
2. eslint-plugin-react/jsx-max-props-per-line

Answer 2

我不认为行长有一个神奇的数字。我的团队也认为 80 太短，所以我们选择 100。

我会挑选一些东西，看看感觉如何。了解您喜欢什么以及为什么通常比遵循社区标准更重要。

Answer 3

我得出了与您相同的结论，即 JSX 和常规 JS/TS 在本质上是不同的，并且在格式化程序中应该有不同的字符限制。请在我打开的问题中添加您的支持：https://github.com/prettier/prettier/issues/14791