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

Question

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

html_code_all_wonky

Answer 1

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

jsxBracketSameLine: false

更多信息在这里 https://prettier.io/docs/en/options.html#jsx-brackets

Answer 2

ESLint 规则在eslint-plugin-react包中：jsx-closure-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>