阻止重新格式化HTML元素的右括号中的esint和premiser

Question

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

html_code_all_wonky

Answer 1

在更漂亮的配置文件上(我喜欢.praiterrc.js(，添加

jsxBracketSameLine: false

更多信息请点击此处https://prettier.io/docs/en/options.html#jsx-括号

Answer 2

ESLint规则在eslint-plugin-react包中：jsx右括号位置：

// 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>

Answer 3

我通过将此规则添加到eslint:来修复它

rules: {
'prettier/prettier': ['error', { bracketSameLine: false }]
}