Prettierで要素タグの属性分割を無効にする方法

Aug 24 2020

VueCLIを使用して新しいVueプロジェクトを生成しました。リンターオプションのプロンプトには、Prettierを選択しました。新しい行への属性の分割を無効にするにはどうすればよいですか?例えば:

これは私のマークアップです:

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

そして私の期待される出力はこれです:

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

.prettierrcファイルを作成して、次の構成を追加しました。

{
  "htmlWhitespaceSensitivity": "ignore"
}

しかし、それは私にはうまくいきませんでした、そしてHTMLはまだ同じように見えます。

回答

3 tony19 Aug 26 2020 at 07:56

ここで適用されるPrettierオプションprintWidthはです。デフォルトは80です。問題のマークアップ行は82文字の長さに、前のタブスペースの長さを加えたものであるため、リンター/フォーマッターは行を分割します。

printWidth問題に対処するためにを増やすことができます。

// .eslintrc.js
module.exports = {
  rules: {
    //...
    "prettier/prettier": [
      "warn",
      {
        printWidth: 180,  // default = 80
      }
    ]
  }
}