VSCodeでVueファイル保存時に形が崩れる。

Question

VSCodeを使っています。Vueファイルを編集していて、下の1枚目の画像の状態で保存すると2枚目のように形が崩れてしまいます。

Alt+Shift+Fでフォーマットすると画像の1枚目の形に直るのですが、保存するとまた崩れてしまいます。解決方法を教えていただきたいです。

保存時に一瞬正しい形にフォーマットされて、その後すぐに崩れるように見えます。
　　

VSCodeのsettings.json

{
  "atomKeymap.promptV3Features": true,
  "editor.multiCursorModifier": "alt",
  "workbench.iconTheme": "material-icon-theme",
  "workbench.colorTheme": "Noctis Lux",
  "editor.tabSize": 2,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "files.associations": {
    "*.vue": "vue"
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  }
}

Answer 1

WSL2でこの問題が起きていたのですが、WSL1にしたら問題なかったです。

Answer 2

"source.fixAll.eslint"が原因です。ESLintのルールとPrettierのルールが衝突しています。

解決法

ESLintの設定（.eslintrc.*ファイル、またはpackage.jsonの"eslintConfig"と書かれた部分）に以下のルールを追記すればと解決すると思います。

overrides: [
  {
    files: ["*.vue"],
    rules: {
      "vue/html-indent": "off",
    },
  },
],

overrides:
  - files: ["*.vue"]
    rules:
      vue/html-indent: off

"overrides": [
  {
    "files": ["*.vue"],
    "rules": {
      "vue/html-indent": "off"
    }
  }
]

Comments

[yakamashiwaa]

.eslintrc.jsに追記してみましたが直っていないようです…
WSL2でこの問題が起きているのですが、WSL1だと問題ないみたいです。