Nuxt.jsでセットアップしたときに出るPrettierのエラー対応方法

Nuxt.jsでセットアップ時にPrettierの設定した後に起動すると以下のようなエラーが出る

 ERROR  Failed to compile with 1 errors                                                                                                                                          friendly-errors 23:56:22


 ERROR  in ./pages/index.vue                                                                                                                                                     friendly-errors 23:56:22

Module Error (from ./node_modules/eslint-loader/index.js):                                                                                                                       friendly-errors 23:56:22

/Users/ebarakazuhiro/***/pages/index.vue
  36:1  error  Delete `⏎`  prettier/prettier

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

                                                                                                                                                                                 friendly-errors 23:56:22
 @ ./.nuxt/router.js 6:24-8:3
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr/client ./.nuxt/client.js
                                                                                                                                                                                 friendly-errors 23:56:22
ℹ Waiting for file changes                                                                                                                                                                       23:56:22

 READY  Server listening on http://127.0.0.1:3000                                                                                                                                                23:56:22

events.js:183
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE 127.0.0.1:3000
    at Object._errnoException (util.js:992:11)
    at _exceptionWithHostPort (util.js:1014:20)
    at Server.setupListenHandle [as _listen2] (net.js:1355:14)
    at listenInCluster (net.js:1396:12)
    at doListen (net.js:1505:7)
    at _combinedTickCallback (internal/process/next_tick.js:141:11)
    at process._tickDomainCallback (internal/process/next_tick.js:218:9)
[nodemon] app crashed - waiting for file changes before starting...

エラーで表記されてるようにpages/index.vueの36行目でPrettierのエラーが発生しています。

pages/index.vue

<script>
import Logo from '~/components/Logo.vue'

export default {
  components: {
    Logo
  }
}
</script>

<style>
******* ここ *******
.container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

上記のコードの<style>と.containerの間に改行が空いてることが原因です。

なので、ここの改行を消せばPrettierのエラーが出なくなります。

また、コードをいじらなくても

yarn lint --fix

をすると、自動でフォーマットしてくれます。

この問題は、Nuxt.jsをセットアップするときにPrettierをinstallした場合のみに発生するので、Prettierを入れていない場合は発生しません。