Make prettier less ugly - 防止拆分标签

Question

VS Code 中的

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

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

现在标签在各自的行上完成，内容单独在第 2 行。

我一直无法在 prettier 文档中找到配置它的方法。有忍者知道怎么做吗？

Answer 1

我同意你的意见。这个 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
  }
}

Answer 2

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

Make prettier less ugly - 防止拆分标签

Make prettier less uglier - prevent split tags

vue.js

visual-studio-code

prettier