個人開発で create-nuxt-app で Nuxt プロジェクトを作成したのだが，Prettier と VSCode の フォーマット機能が競合した．
おそらく，最初に通る道なんだろうなと思ったが，意外とと対応方法がわかるのに時間が掛かったのでまとめてみる．
前提
何となくデフォルトで作成される.vueファイルを見た後，いつもの癖で保存する．
コミットすると，lint-stagedで引っかかることに気づく．
» git commit -m "fix" 2020/06/15 19:17:34
husky > pre-commit (node v12.18.0)
✔ Preparing...
⚠ Running tasks...
❯ Running tasks for *.{js,vue}
✖ yarn lint [FAILED]
✔ Running tasks for *.{css,vue}
↓ Skipped because of errors from tasks. [SKIPPED]
✔ Reverting to original state because of errors...
✔ Cleaning up...
✖ yarn lint:
error Command failed with exit code 1.
$ eslint --ext .js,.vue --ignore-path .gitignore . /Users/okabeeeat/projects/nuxt_project/layouts/default.vue /Users/okabeeeat/projects/nuxt_project/layouts/error.vue
/Users/okabeeeat/projects/nuxt_project/layouts/default.vue
3:25 error Replace `·v-model="drawer"·:mini-variant="miniVariant"·:clipped="clipped"·fixed·app` with `⏎······v-model="drawer"⏎······:mini-variant="miniVariant"⏎······:clipped="clipped"⏎······fixed⏎······app⏎····` prettier/prettier
5:21 error Replace `·v-for="(item,·i)·in·items"·:key="i"·:to="item.to"·router·exact` with `⏎··········v-for="(item,·i)·in·items"⏎··········:key="i"⏎··········:to="item.to"⏎··········router⏎··········exact⏎········` prettier/prettier
/Users/okabeeeat/projects/nuxt_project/layouts/default.vue/nuxt.config.js
86:12 warning 'config' is defined but never used. Allowed unused args must match /^_/u @typescript-eslint/no-unused-vars
86:20 warning 'ctx' is defined but never used. Allowed unused args must match /^_/u @typescript-eslint/no-unused-vars
✖ 4 problems (2 errors, 2 warnings)
2 errors and 0 warnings potentially fixable with the `--fix` option.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
husky > pre-commit hook failed (add --no-verify to bypass)
原因は，改行していないことによる error で VSCode で自動修正する．そして保存したらまた自動修正する前の状態になる...どゆこと？？
原因
最初は Prettier と ESLint のフォーマット機能の競合だと勘違いして色々調べたが，どうやら VSCode の設定画面のvetur.format.defaultformatter.htmlが「prettyhtml」になっていた．
つまり Prettier のフォーマットに則っていないから error になるが，VSCode で保存をしたら，prettyhtml のフォーマットになってしまうということになる．
そのため，この設定を Prettier に変えれば良い．
これで.vueファイルを保存をすると prettyhtml ではなく，Prettier のフォーマット機能でフォーマットできる．
まとめと所感
今回は Prettier と VSCode の フォーマット機能の設定についてまとめてみた． Prettier を使ったプロジェクトはまだ触ったばかりなので，Nuxt.js 同様これからドンドン使っていくぞ！！！
