create-nuxt-app した Nuxt プロジェクトに Prettier を入れたら VSCode の フォーマット機能と競合した時の対応

個人開発で create-nuxt-app で Nuxt プロジェクトを作成したのだが，Prettier と VSCode の フォーマット機能が競合した．

おそらく，最初に通る道なんだろうなと思ったが，意外とと対応方法がわかるのに時間が掛かったのでまとめてみる．

前提

• VSCode に「vetur」という拡張機能が入っていること
• VSCode の設定でeditor.formatOnsaveがオンになっていること

marketplace.visualstudio.com

何となくデフォルトで作成される.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 同様これからドンドン使っていくぞ！！！