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

Posted 2023-02-22

【中文标题】让漂亮不那么丑 - 防止拆分标签

【英文标题】：Make prettier less uglier - prevent split tags

【发布时间】：2020-11-26 20:27:52

【问题描述】：

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

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

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

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

【问题讨论】：

您的第二个示例将前导和尾随空格添加到标记的textContent。你确定这在所有情况下都是可取的吗？

是的，就我而言，它没有造成任何问题，所以我很满意。

【参考方案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。