如何强制更漂亮的 html 格式化以在一行中格式化标签？

Question

我在我的 VSC 中使用了 prettier，那么如何强制 prettier HTML 格式化以在一行而不是多行中格式化标签？

我想在一行中格式化这样的东西

<v-navigation-drawer :clipped="$vuetify.breakpoint.lgAndUp" v-model="drawer" fixed app>

是否存在更漂亮的 HTML 格式化程序的任何配置？

Answer 1

这取决于您的 IDE 设置，但正如 documentation 所述，您应该有一个配置文件，您应该在其中查找 html.format.wrapLineLength 属性并应用该行令你满意的长度值。这将防止 Prettier 在达到分配给属性的行长度之前中断你的行。这仅适用于 HTML。出于整体目的，您应该使用 prettier.printWidth 属性其中

Fit code within this line limit

请注意制表/缩进空格也计入行长。

不幸的是，当代码行超过上述数量时，它将被分配到多行，每行属性。到目前为止，我还没有找到只换行而不吐多行的解决方案。

更新我提到并希望 behavior Prettier 负担不起，但行长度技巧仍然可以完成工作......部分。

Answer 2

Prettier 有选项 printWidth。如果您将该选项设置为较高的数字，它将减少换行。

在您的 .prettierrc.json 文件中，您可以为 HTML 文件覆盖此选项：

{
  // Other options...
  "overrides": [
    {
      // change .html with .vue if you are using Vue files instead of HTML
      "files": "src/**/*.html", 
      "options": {
        "printWidth": 140
      }
    }
  ]
}

Is not recommendable to use a line-lenght higher than 140. Prettier is opitionated, so it should be used without too many customizations.

Answer 3

我知道这个话题已经过时了，但也许其他人仍然有这个问题。在 Prettier 设置中，您可以调整 Print Width 的宽度。 120 宽度适合我。

Answer 4

首先检查根目录中是否有文件名.prettierrc。如果没有，创建它，然后将这些值放入其中。

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "printWidth": 3000,
  "bracketSpacing": true
}

将 printWidth 设置为较大的值，并随时使用编辑器切换换行；例如，在 VS Code 中：Alt+Z.

如何强制更漂亮的 html 格式化以在一行中格式化标签？

How to force prettier html formatting to format tags in one line?

html

visual-studio-code

vscode-settings

prettier