阻止 eslint 和 prettier 重新格式化 HTML 元素上的右括号答案

【问题标题】：block eslint and prettier from reformatting closing brackets on HTML elements阻止 eslint 和 prettier 重新格式化 HTML 元素上的右括号
【发布时间】：2019-01-09 14:56:29
【问题描述】：

好吧，这让我快疯了！如何阻止 eslint/prettier 在保存时将 DIV 元素中的右括号向下移动到新行？我已经尝试了几乎所有的 eslint 规则并打开和关闭更漂亮。
我附上了一个屏幕截图，向社区展示我的意思。由于这是一个代码格式化问题，stackoverflow 希望我正确格式化（这违背了目的）。非常感谢您的帮助！谢谢。

html_code_all_wonky

【问题讨论】：

呵呵，我想如果你想使用 Prettier，你必须接受这种不稳定。这样做是为了降低线路长度。个人需要一些时间来适应，但我发现它现在更具可读性。

标签： html reactjs jsx eslint prettier

【解决方案1】：

在更漂亮的配置文件（.prettierrc.js 是我的首选）上，添加

jsxBracketSameLine: false

【讨论】：

【解决方案2】：

ESLint 规则在eslint-plugin-react 包中：jsx-closing-bracket-location:

// for example, jsx-closing-bracket-location: [1, 'after-props']

<Hello
  firstName="John"
  lastName="Smith" />

Prettier 没有提供配置它的方法。按设计。所以，你必须就地关闭它：

<div className="App">
  <h1>Hello CodeSandbox</h1>
  {/* prettier-ignore */}
  <h2>
    Start editing to see some magic happen!</h2>
</div>

<div className="App">
  <h1>Hello CodeSandbox</h1>
  {/* prettier-ignore */}
  <Hello
    lastName="Smith"
    firstName="John" />
</div>

【讨论】：

@NeverSummer70 酷！如果您认为这是一个可行的解决方案，请考虑接受答案