【prettier】htmlWhitespaceSensitivityのignoreやstrict

おすすめのオンラインプログラミング学習

prettierの覚書です。vue(nuxt)で利用しています。

htmlWhitespaceSensitivityのignoreやstrict

templete内のhtmlの改行がいやで少し設定をいじりました。ホワイトスペースをどう扱うかに付随して改行も変わってしまうようです。

  rules: {
    'prettier/prettier': [
      'error',
      {
        // htmlタグの改行方針
        // htmlWhitespaceSensitivity: 'ignore'
        // htmlWhitespaceSensitivity: 'css'
        htmlWhitespaceSensitivity: 'strict'
      }
    ],
}

公式サイトをみると、

whitespace is significant in inline elements.

と書かれています。ホワイトスペースはインライン要素で重要とありますが、レイアウトに関わるからでしょう。改行を綺麗に入れた際にホワイトススペースも入り、出力のレイアウトが変わってしまうとそりゃまずいよねということですね。

公式サイトの解説がわかりやすいです。

Prettier 1.15: HTML, Vue, Angular and MDX Support · Prettier
This release adds support for HTML, Vue, Angular and MDX.

stackoverflowでも話題になっていまいました。

Is there a way to fix this error in prettier, in nuxt / vue environment
I just ran NPM update on a project that was working fine. Now, I am getting a Prettier "Friendly Error". I'm wondering if ESLint and Prettier are not ...

設定はeslintとの設定の兼ね合いもあるでしょうが、strictを推奨している人が多そうでした。

参考になれば幸いです。

人気記事  安いオンラインプログラミングスクールおすすめ比較
  • 無料体験あり、オンライン完結あり
  • プログラミングスクールはオンラインで格安に!
  • 電子書籍並みの価格で買える動画学習サイトも一緒に紹介!初心者から上級者向け英語コンテンツまであり。ソースコードは言語関係なしに世界共通!
スポンサーリンク
おすすめのオンラインプログラミング学習
neruをフォローする
スポンサーリンク
ebookbrain

コメント

タイトルとURLをコピーしました