【prettier】htmlWhitespaceSensitivityのignore/css/strictはどれ?

プログラミング学習

コードを整えるフォーマッターPrettierの設定の覚書です。eslintでも整形できますがさらに補ってくれます。ちなみにvue(nuxt)で利用しています。

特集:フリーランスWebエンジニアのための週2からのリモートワーク

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 playing we...
stackoverflow.com

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

ただ外しちゃている人もいましたね…。

liタグの長文でエラーがでたことがあり、気持ちはわかります。

cssでデザインを改善する方法もあり

cssの指定が悪さすることもあります。たとえば、次のようなホワイトスペースに関わるコードだったりdisplayの属性を変えるコードだったり。prettier君は「divだから改行しちゃて問題なし」みたいな感じで、CSSの変更まで加味して正しくソースコードを整形しないって感じですかね。

white-space: pre-wrap;

pre-wrapはソース中のホワイトスペースをそのまま表示する指定です。その場合、css側を修正する方法もあります。strictを指定する方法もありますが、使うか若干悩むところです…。

スポンサーリンク

eslintのmax-lenも無効に!?

長いcssを書くと、eslintをかけるように指示されるためmax-lenも追記してあげました。

    'prettier/prettier': [
      'error',
      {
        htmlWhitespaceSensitivity: 'css',
        'max-len': ["error", { "code": 120 }]
      }
    ]

‘max-len’: ‘off’は無効にすることもできますが、ひっかれば数を変更すればいいかなとオフは使っていません。

'max-len': 'off'

max-lenとprintWidthの違い

もうひとつ似たものにprintWidthがあります。公式サイトの説明によると、max-lenとprintWidthは同じものではないとあります。

In other words, don’t try to use printWidthas if it was ESLint’s max-len – they’re not the same. max-len just says what the maximum allowed line length is, but not what the generally preferred length is – which is what printWidth specifies.

https://prettier.io/docs/en/options.html#print-width

max-lenは最大文字数ですが、printWidthは若干違うようです。printWidthのデフォルトは80ですが、カスタマイズできます。片方で調整するか両方で調整するかお好みなのでしょうか。ただ改行はこの2つをチェックすればよいかもしれません。

printWidthの設定

VsCodeで設定できます。

Vs Codeの拡張[ Prettier – Code formatter ]をインストール > Extension Setting > [printWidth]で検索

なお、この設定を変えると、VsCodeのsetting.jsonに反映されます。

しかし、チーム開発する場合は異なる環境ができてしまうため望ましくないようです。

そのため、JSの場合、prettier.config.jsか.prettierrc.jsに設定するとよさそうです。prettier.config.jsはコメントアウトできます。

module.exports = {
  printWidth: 120
  // printWidth: 100
}

公式リファレンスはこちらのようです。

Configuration File · Prettier
Prettier uses ( for configuration file support. This means you can configure Prettier via (in order of precedence):
prettier.io

.eslintrc.jsのprintWidth

.eslintrc.jsのprintWidthはあくまでeslintをかけるときです…。

この設定と他の設定がミスマッチしていると、eslintをかけたとき改行されて、自動保存したときに改行が元に戻るみたいな症状に悩まされることになります。.eslintrc.jsの設定が短く、他の設定が長くなっている場合ですね。

  plugins: ['prettier'],
  // add your custom rules here
  rules: {
    // https://prettier.io/docs/en/options.html
    'prettier/prettier': [
      'error',
      {
        htmlWhitespaceSensitivity: 'ignore',
        printWidth: 120
      }
    ]

printWidthは80?120?200?

個人的には120に落ち着きました。横にスクロールする状況はさすがに避けたく。
MacBookProを使っています。

スポンサーリンク

【比較】そもそもPrettierではなくBeautify

prettierではなくBeautifyを使っている人がいることを知りました。

settings.jsonにこんな設定ができるのですね。

“html.format.wrapLineLength”: 0

prettierの改行はあまり好きじゃなくて気持ちがわかるのですが、個人的に今のところprettierを使っています。情報提供のみで。

参考になれば幸いです。

コメント