create nuxt-appした初期プロジェクトでprettierからエラーが出て動かない

create nuxt-appでアプリケーションをテンプレートから作成時にprettierを使うと謎のエラーが出て実行できない症状に悩まされたので、調べてみました。

環境

"nuxt": "^2.0.0",
"eslint": "^5.0.1",
"prettier": "1.14.3",

エラーメッセージ

初期テンプレートを利用しているのに、

yarn create nuxt-app mytest

...
? Use eslint yes
? Use prettier yes
...

yarn run build
yarn run dev

こうなる

 ERROR  Failed to compile with 1 errors                                                          17:31:46

 error  in ./layouts/default.vue

Module Error (from ./node_modules/eslint-loader/index.js):

.../mytest/layouts/default.vue
   89:1  error  Delete `··`                           prettier/prettier
   90:3  error  Delete `··`                           prettier/prettier
   91:1  error  Replace `······` with `····`          prettier/prettier
   92:1  error  Delete `··`                           prettier/prettier
   93:1  error  Replace `········` with `······`      prettier/prettier
   94:1  error  Delete `··`                           prettier/prettier
   95:1  error  Replace `········` with `······`      prettier/prettier
   96:1  error  Delete `··`                           prettier/prettier
   97:1  error  Replace `··········` with `········`  prettier/prettier
   98:7  error  Delete `··`                           prettier/prettier
   99:1  error  Delete `··`                           prettier/prettier
  100:7  error  Delete `··`                           prettier/prettier
  101:1  error  Delete `··`                           prettier/prettier
  102:7  error  Delete `··`                           prettier/prettier
  103:5  error  Delete `··`                           prettier/prettier
  104:1  error  Replace `····` with `··`              prettier/prettier
  105:1  error  Delete `··`                           prettier/prettier

✖ 17 problems (17 errors, 0 warnings)
  17 errors and 0 warnings potentially fixable with the `--fix` option.


 @ ./.nuxt/App.js 4:0-47 6:14-23
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js

READY  Listening on http://localhost:3000

直すポイントも謎...。これでeslintとprettierをnoにしてごまかしていたが、気になるので調べて見た。

対応方法

yarn run lint --fixを実行する

yarn run lint --fix
yarn run v1.3.2
warning ../package.json: No license field
$ eslint --ext .js,.vue --ignore-path .gitignore . --fix
✨  Done in 1.93s.

これだけなのにかなり悩みました。

yarn run lintで再度チェックできます。

diffをとってみた

どうやらインデントが一段ずれているようです。Delete `··`とあるのはタブの事だったのですね。

diff --git a/layouts/default.vue b/layouts/default.vue
index 29dc068..14779bc 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -86,21 +86,21 @@
 </template>
 <script>
-  export default {
-    data() {
-      return {
-        clipped: false,
-        drawer: true,
-        fixed: false,
-        items: [
-          { icon: 'apps', title: 'Welcome', to: '/' },
-          { icon: 'bubble_chart', title: 'Inspire', to: '/inspire' }
-        ],
-        miniVariant: false,
-        right: true,
-        rightDrawer: false,
-        title: 'Vuetify.js'
-      }
+export default {
+  data() {
+    return {
+      clipped: false,
+      drawer: true,
+      fixed: false,
+      items: [
+        { icon: 'apps', title: 'Welcome', to: '/' },
+        { icon: 'bubble_chart', title: 'Inspire', to: '/inspire' }
+      ],
+      miniVariant: false,
+      right: true,
+      rightDrawer: false,
+      title: 'Vuetify.js'
     }
   }
+}
 </script>