Question

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

html_code_all_wonky

Answer 1

ESLint规则位于eslint-plugin-react软件包中：jsx-closing-bracket-location：

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

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

更漂亮没有提供配置它的方法。通过设计。因此，您必须就地关闭它：

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

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

jsxBracketSameLine: false

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

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

2 个答案: