繁体   English   中英

如何强制使用更漂亮的 html 格式来格式化一行中的标签?

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

我在我的 VSC 中使用更漂亮,那么如何强制更漂亮的 HTML 格式将标签格式化为一行,而不是多行?

在此处输入图片说明 我想在一行中格式化这样的东西

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

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

printWidth有选项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 是可选的,因此应该在没有太多自定义的情况下使用。

这取决于您的 IDE 设置,但正如文档所述,您应该有一个配置文件,您应该在其中查找html.format.wrapLineLength属性并应用满足您的行长度值。 这将防止 Prettier 中断您的线路,直到达到为该属性指定的线路长度。 这仅适用于 HTML。 出于整体目的,您应该使用prettier.printWidth属性

适合此行限制内的代码

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

不幸的是,当代码行超过上述数字时,它将被视为多行,每行每个属性。 到目前为止,我没有找到解决方案来换行到额外的行,而不会吐到多行。

更新我的行为提到并希望使用 Prettier 无法负担得起,但行长技巧仍然可以完成这项工作......部分。

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

在此处输入图片说明

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

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

printWidth设置为较大的值,并在需要时使用编辑器切换换行文本; 例如,在 VS 代码中: Alt+Z

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM