【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.

prettier.io

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 ...

stackoverflow.com

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

Prettierの htmlWhitespaceSensitivityを "strict" で指定することがいいような話しをどこかで聞いたことあるんだけど、理由を忘れてしまった😅
"ignore"がダメな理由はすぐわかったけど。

— tomouchi (@tomouchi_) January 13, 2019

参考になれば幸いです。