white-space: pre-wrapとeslint

Question

先程質問した内容

pタグの要素内の上下にmarginでもなくpaddingでもない余白

について、いろいろ触るうちに自己解決欄に書いた方法は間違えていることに気づきました。
以下、問題についての説明です。

問題の説明

現在Vue.jsを使用して開発しており、VS CodeにてESLintをONにした状態で開発しています。
そのため

<p class="message-text">{{ message.content.text }}</p>

以上のように書くと

Expected 1 line break after opening tag (`<p>`), but no line breaks found.eslint(vue/singleline-html-element-content-newline)

このような注意が表示され、これに従って修正すると

<p class="message-text">
  {{ message.content.text }}
</p>

このように自動で改行されます。

これに対して

.message-text{
  white-space: pre-wrap;
}

上記のCSSを適用すると、上下には入ってほしくない隙間ができてしまいます。

これに対しての適切な解決策はありますでしょうか。
(ゴリ押しのCSS修正等は自分でもできると思います。)

Answer 1

ESLintのvue/singleline-html-element-content-newlineはwhite-space: normal;な要素であることを前提にしたルールになっています。<pre>やwhite-space: pre-wrap;が適用される要素に対しては、適切なルールとは言えません。実際に、<pre>はデフォルトで対象外となっています。

実施するとすれば次の三つです。

1. 該当ルールを無効にする。
   他の全てにおいて無効になってしまいますが、必要なルールに絞るというのもESLintの一つの使い方です。(ルールの無効化方法はESlintのドキュメントを参考にしてください。)
2. 該当ルールで<p>を対象外にする。
   デフォルトでは<pre>と<textarea>とインライン要素が対象外です。そこに<p>を追加します。オプション等については下記のドキュメントを参考にしてください。
   vue/singleline-html-element-content-newline | eslint-plugin-vue
3. 該当の部分だけ対象外にする。
   <template>内は<!-- eslint-disable -->というディレクティブで無効化できます。詳しくは下記のドキュメントを参考にしてください。
   vue/comment-directive | eslint-plugin-vue

下に行くことほど全体の影響範囲が小さくなりますが、該当箇所がたくさんある場合は、それだけ手間が増えることになります。状況にあったものを選択してください。

Comments

[hi-se]

回答ありがとうございます！
いまいちルールがまだ把握できてないので、とりあえず言われたことに従っておかないと・・・と思っていましたが、状況にあった選択は必要事項ですね。

詳しい改善策を３通りも提示してくださってありがとうございました。

Answer 2

CSS を変更出来ないのであれば、vue/singleline-html-element-content-newline規則を無効化すれば良いと思います。

Comments

[s8_chu]

既に同じ内容の回答があることに気づきませんでした。
こちらの回答は無視してください。

[hi-se]

回答ありがとうございました！