きっかけ
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' } ] }
そもそもこの原因がわかってしまえば、ちょっと見た目が変ですがそのままでもよい気がします。