使更漂亮的外观更丑陋-防止标签分离

Question

VS Code中的

Prettier很棒，但在这种情况下，它似乎使内容难以理解。这是Vue模板文件中更漂亮的包装行为的示例：

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

现在，标记在它们自己的行上是完整的，而内容仅在第2行上。

我无法在更漂亮的文档中找到一种配置方式。有忍者知道怎么做吗？

Answer 1

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

Answer 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
  }
}

Answer 3

阅读this

有一个jsxBracketSameLine属性，将其设置为true，就可以了。 只需将您的自定义配置添加到您的包json

示例：

"prettier": {
    "singleQuote": true,
    "jsxBracketSameLine": true,
    "printWidth": 80,
    "tabWidth": 2,
    "semi": true,
    "bracketSpacing": true,
    "jsxSingleQuote": false
  }