Eslint react/jsx-one-expression-per-line：允许变量和 JSX 字符串在同一行，但不允许元素

Posted 2023-02-21

【中文标题】Eslint react/jsx-one-expression-per-line：允许变量和 JSX 字符串在同一行，但不允许元素

【英文标题】：Eslint react/jsx-one-expression-per-line: allow variables and JSX strings on the same line, but not elements

【发布时间】：2020-01-15 21:36:12

【问题描述】：

例如对于这个 JSX：

<h1>
  Hi name
</h1>

react/jsx-one-expression-per-line 插件希望它是：

<h1>
  Hi
  ' '
  name
</h1>

或

<h1>
  `Hi $name`
</h1>

我认为这两个都很丑。我想允许第一个例子。但是，我不想禁用插件，因为我不想在一行中允许多个元素：

<p>hi</p><p>bye</p>

我该怎么做？

【问题讨论】：

将此"react/jsx-one-expression-per-line": "off" 添加到您的 eslint 配置文件中的规则中

我不想禁用插件，因为我不想在一行上允许多个元素

将此"prettier/react" 添加到您的.eslintrc 的"extends" 部分。见github.com/prettier/prettier/issues/6456#issuecomment-529075600

@ceoehis 这有帮助。谢谢：D

【参考方案1】：

这个怎么样？

const welcomeMessage = `Hi $name`;
<h1>
  welcomeMessage
</h1>