强制 Prettier 将内部文本放在新行上而不尾随 >

Question

我正在使用 VScode 使用 Prettier 和 Eslint 进行 Vue 开发。

目前，Prettier 正在像这样格式化我的代码：

我想要的是强制执行以下操作

如果我手动将其更改为我想要的格式，它不会将其标记为不正确，但默认情况下也不会执行此格式。

有没有办法默认完成这个？

我的相关VScodeSettings.json

"prettier.disableLanguages": ["json"],
  "[scss, css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "vetur.validation.template": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.formatOnSave": true,
  "html.format.wrapAttributes": "force-aligned",
  "sync.gist": "30b867ce7d7d1360ee7bad0cf5599fc3",
  "sync.autoDownload": true,
  "sync.autoUpload": true,
  "sync.forceUpload": false,
  "sync.removeExtensions": false,
  "sync.quietSync": true,
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },

我的 .prettierrc 设置

{
  "trailingComma": "none",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}

我的eslintrc.js设置

extends: [
    'plugin:vue/recommended',
    'eslint:recommended',
    'prettier/vue',
    'plugin:prettier/recommended'
  ],
  plugins: ['vue', 'prettier'],

Answer 1

需要修改prettier中的printwidth选项，但需要注意以下事项

There are some edge cases, such as really long string literals, regexps, comments and variable names, which cannot be broken across lines (without using code transforms which Prettier doesn’t do). Or if you nest your code 50 levels deep your lines are of course going to be mostly indentation :) - prettier

Answer 2

将此添加到 .prettierrc 或 .prettierrc.json 文件似乎可以解决此类问题：

"htmlWhitespaceSensitivity": "ignore"

你的看起来像这样：

{
  "trailingComma": "none",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "htmlWhitespaceSensitivity": "ignore"
}

要更好地了解这是否适合您，您可以阅读以下主题：Whitespace-sensitive formatting

强制 Prettier 将内部文本放在新行上而不尾随 >

Force Prettier to place inner text on new line without trailing >

vue.js

vscode-settings

prettier

eslintrc