如何強制使用更漂亮的 html 格式來格式化一行中的標簽？

Question

我在我的 VSC 中使用更漂亮，那么如何強制更漂亮的 HTML 格式將標簽格式化為一行，而不是多行？

我想在一行中格式化這樣的東西

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

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

Answer 1

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 是可選的，因此應該在沒有太多自定義的情況下使用。

Answer 2

這取決於您的 IDE 設置，但正如文檔所述，您應該有一個配置文件，您應該在其中查找html.format.wrapLineLength屬性並應用滿足您的行長度值。 這將防止 Prettier 中斷您的線路，直到達到為該屬性指定的線路長度。 這僅適用於 HTML。 出於整體目的，您應該使用prettier.printWidth屬性

適合此行限制內的代碼

請注意，制表/縮進空格也計入行長。

不幸的是，當代碼行超過上述數字時，它將被視為多行，每行每個屬性。 到目前為止，我沒有找到解決方案來換行到額外的行，而不會吐到多行。

更新我的行為提到並希望使用 Prettier 無法負擔得起，但行長技巧仍然可以完成這項工作......部分。

Answer 3

我知道這個話題很老，但也許其他人仍然有這個問題。 在 Prettier 設置中，您可以調整 Print Width 的寬度。 120 寬度適合我。

Answer 4

首先檢查根目錄中是否有文件名.prettierrc 。 如果不是，請創建它，然后將這些值放入其中。

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

將printWidth設置為較大的值，並在需要時使用編輯器切換換行文本； 例如，在 VS 代碼中： Alt+Z 。