让漂亮不那么丑 - 防止拆分标签答案

【问题标题】：Make prettier less uglier - prevent split tags让漂亮不那么丑 - 防止拆分标签
【发布时间】：2020-11-26 20:27:52
【问题描述】：

Prettier 在 VS Code 中很棒，除了在这种情况下它似乎使事情变得不那么可读。这是 Vue 模板文件中 prettier 的包装行为的示例：

请注意，开始标签的结束括号放在第二行的开头，结束标签在第 2 行和第 3 行之间分开。在我看来，这更漂亮：

现在标签在它们自己的行上是完整的，内容是单独在第 2 行上的。

我一直无法在更漂亮的文档中找到配置它的方法。有忍者知道吗？

【问题讨论】：

您的第二个示例将前导和尾随空格添加到标记的textContent。你确定这在所有情况下都是可取的吗？
是的，就我而言，它没有造成任何问题，所以我很满意。

标签： vue.js visual-studio-code prettier

【解决方案1】：

尝试在您更漂亮的配置中将htmlWhitespaceSensitivity 属性设置为ignore。

【讨论】：

这是我想要避免的行为的原因，谢谢。
太棒了，我浏览了谷歌提供的所有解决方案，但这个只对我有用。非常感谢

【解决方案2】：

我同意你的意见。这条 Linter 规则会对您有所帮助。

eslint-plugin-vue/html-closing-bracket-newline.md at master · vuejs/eslint-plugin-vue

我在.eslintrc.js下面设置了规则。

"vue/html-closing-bracket-newline": [2, { multiline: "never" }]

我在下面设置.vscode/setting.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false
  },
  "[vue]": {
    "editor.formatOnSave": false
  }
}

【讨论】：

我指的是更漂亮的自动格式化行为，而不是 linter 警告。我相信这些是分开的。
对不起，我添加了.vscode/setting.json。我在保存时使用 eslint --fix 而不是 VS Code 更漂亮
问题是如何配置 prettier 的格式，而不是使用 linting。