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

Posted 2023-02-22

【中文标题】强制 Prettier 将内部文本放在新行上，不带尾随 >

【英文标题】：Force Prettier to place inner text on new line without trailing >

【发布时间】：2020-09-10 18:19:55

【问题描述】：

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

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

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

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

有没有办法默认做到这一点？

我的相关 VScode Settings.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'],

【问题讨论】：

这也发生在角度......

我有类似配置的同样问题。你找到解决办法了吗？

当时我放弃了，但最近遇到了这个。也许会有用：***.com/questions/61715509/…

【参考方案1】：

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

"htmlWhitespaceSensitivity": "ignore"

你的应该是这样的：

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

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

【讨论】：

这确实解决了问题！非常感谢！

【参考方案2】：

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

有一些边缘情况，例如非常长的字符串文字、正则表达式、cmets 和变量名，它们不能跨行断开（不使用 Prettier 不做的代码转换）。或者，如果您将代码嵌套 50 层，那么您的行当然主要是缩进 :) - prettier

【讨论】：

嗯.. 这不是包装问题，而是格式问题。我不确定这是否有帮助。