質問: 先程質問した内容 > > pタグの要素内の上下にmarginでもなくpaddingでもない余白 > > > について、いろいろ触るうちに自己解決欄に書いた方法は間違えていることに気づきました。 以下、問題についての説明です。 ### 問題の説明 現在Vue.jsを使用して開発しており、VS CodeにてESLintをONにした状態で開発しています。 そのため ``` {{ message.content.text }} ``` 以上のように書くと ``` Expected 1 line break after opening tag (``), but no line breaks found.eslint(vue/singleline-html-element-content-newline) ``` このような注意が表示され、これに従って修正すると ``` {{ message.content.text }} ``` このように自動で改行されます。 これに対して ``` .message-text{ white-space: pre-wrap; } ``` 上記のCSSを適用すると、上下には入ってほしくない隙間ができてしまいます。 これに対しての適切な解決策はありますでしょうか。 (ゴリ押しのCSS修正等は自分でもできると思います。)
回答: ESLintの`vue/singleline-html-element-content-newline`は`white-space: normal;`な要素であることを前提にしたルールになっています。や`white-space: pre-wrap;`が適用される要素に対しては、適切なルールとは言えません。実際に、はデフォルトで対象外となっています。 実施するとすれば次の三つです。 1. 該当ルールを無効にする。 他の全てにおいて無効になってしまいますが、必要なルールに絞るというのもESLintの一つの使い方です。(ルールの無効化方法はESlintのドキュメントを参考にしてください。) 2. 該当ルールでを対象外にする。 デフォルトではととインライン要素が対象外です。そこにを追加します。オプション等については下記のドキュメントを参考にしてください。 vue/singleline-html-element-content-newline | eslint-plugin-vue 3. 該当の部分だけ対象外にする。