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

Question

我在VSC中使用了漂亮的字体，那么如何强制更漂亮的HTML格式在一行而不是多行中设置标签格式？

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

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

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

Answer 1

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

<块引用>

不建议使用大于 140 的线长。Prettier 是可选的，因此应该在没有太多自定义的情况下使用。

Answer 2

这取决于您的IDE设置，但是如documentation所述，您应该有一个配置文件，在其中应查找html.format.wrapLineLength属性并应用满足您要求的线长值。这将防止Prettier中断行，直到达到该属性分配的行长。这仅适用于HTML。 总体而言，您应使用{的prettier.printWidth属性

  

此行限制内的适合代码

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

不幸的是，当代码行超过上述数字时，它将被吐到多行中，每个属性每行。到目前为止，我还没有找到只包装到多余的行而不吐出多个包装的解决方案。

更新 我behavior提到并期望使用它，但Prettier却负担不起，但是行长技巧仍然可以完成任务……部分。

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。

Answer 5

带有VSCode

1. 点击View
2. Extension
3. 在搜索框中输入Prettier
4. 点击漂亮的扩展程序左下方的小齿轮图标

1. 选择配置扩展程序设置
2. 打开设置后，向下滚动至Prettier：Print width并设置宽度。默认值为80，请增加该值。