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

JSX据我所知，React 社区中没有关于最大代码行数的事实上的最佳实践。你可以自己调整一下。

在我们的项目中，一个函数的行数约为20 行。如果JSX代码超过阈值，我们就认为该组件过于臃肿，并将其重构为更小的组件。

eslint-plugin-react还值得尝试降低 JSX 代码的复杂性。

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