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