takeda_san’s blog

KotlinとVRを頑張っていく方向。

HTMLをprettierでフォーマットかけると変なところで改行がはいる件

きっかけ

Vue.jsのファイルでHTML書いてprettierでフォーマットかけるとたまーに、横に長い行が変な位置で改行せよとエラーが出る。
たとえばこんなコード。

<template>
  <a href="/hoge.html">super long long long long long long long long long long</a>
</template>

出力

  2:23  error  Replace `>super·long·long·long·long·long·long·long·long·long·long</a` with `⏎····>super·long·long·long·long·long·long·long·long·long·long</a⏎··`  prettier/prettier

うーん?とりあえず --fix をつけて修正してみる。
(lintはnuxtのエイリアスです…)

npm run lint -- --fix

修正後

<template>
  <a href="/hoge.html"
    >super long long long long long long long long long long</a
  >
</template>

変!

原因

ここのissueでやりとりされてることが、回答になりました。

close tag of A span multi lines · Issue #5433 · prettier/prettier · GitHub

Prettier 1.15: HTML, Vue, Angular and MDX Support · Prettier

要するにインライン要素は表示に関わることがあるので、こんな変な感じに変更されるのですね。
これを

<a href="/hoge.html">super long long long long long long long long long long</a>

こうしたときに

<a href="/hoge.html">
  super long long long long long long long long long long
</a>

スペース2個分がブラウザによっては描画されちゃうから、よくないねということで末尾の > を先頭に持ってきていると。

対応

先ほどのリンク先にもあるのですが、コメントにてprettierを一時無効にするか、設定変更するかです。
私の場合、eslintと併用しているので .eslintrc.js に設定を追加して対応しました。

  rules: {
    'prettier/prettier': [
      'error',
      {
        htmlWhitespaceSensitivity: 'ignore'
      }
    ]
  }

そもそもこの原因がわかってしまえば、ちょっと見た目が変ですがそのままでもよい気がします。