ESLint/Prettier併用で<img />が怒られる問題

解決したいこと

コード検証にESLintとPrettierを併用しています。
今回、HTMLのvoid elements(area,hr,img,input...)周りが競合して以下のようなエラーになって困っていました。

warning  Disallow self-closing on HTML void elements (<img/>)  vue/html-self-closing
error    Insert `/`                               prettier/prettier

ESLintはvoid elementsでのself-closingを許容していない。
でも、Prettierはvoid elementsに"/>"をつけて閉じたい。
結果、競合が発生してエラーが起きていました。

eslint-config-prettierを使っているのでESLintの設定はリセットされているはずだと思ってましたが、どうもうまく行かず。。。

解決方法（暫定）

HTML5ではvoid elementsのself-closingは許容しているようですし、
結局、ESLint側のルールを見直して対応しました。

.eslintrc.js(一部抜粋)

  rules: {
     "semi": [2, "never"],
     "no-console": "off",
     "vue/max-attributes-per-line": "off",
+    "vue/html-self-closing": ["error", {
+      "html": {
+        "void": "always",
+      }
+    }],
     "prettier/prettier": ["error", { "semi": false }]
   }

self-closing関連の設定詳細はこちらです。

まとめ

少しモヤモヤしますが、void elementsのself-closingはPrettierにお任せすることが出来ました。