Edited at

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

More than 1 year has passed since last update.

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>