[Nuxt.js] npx create-nuxt-app 後の ESLint, Prettier エラーの解決方法
Nuxt.js で npx create-nuxt-app 後に ESLint と Prettier を併用してる関係でエラーが発生する問題の解決方法をご紹介します。
Nuxt.js 初期設定
$ npx create-nuxt-app nuxtjs-spa-sandbox
? Project name nuxtjs-spa-sandbox
? Project description My perfect Nuxt.js project
? Author name Tadashi Shigeoka
? Choose the package manager Npm
? Choose UI framework Vuetify.js
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules
? Choose linting tools ESLint, Prettier
? Choose test framework AVA
? Choose rendering mode Single Page App
Init Nuxt.js SPA app · codenote-net/nuxtjs-spa-sandbox@3e30537
lint エラー
npx create-nuxt-app 直後なのに npm run dev しても lint error で web app が起動しません。
$ npm run lint
> [email protected] lint /Users/shigeoka/works/codenote-net/nuxtjs-spa-sandbox
> eslint --ext .js,.vue --ignore-path .gitignore .
/Users/shigeoka/works/codenote-net/nuxtjs-spa-sandbox/components/VuetifyLogo.vue
6:3 error Insert `/` prettier/prettier
/Users/shigeoka/works/codenote-net/nuxtjs-spa-sandbox/pages/index.vue
25:26 error Insert `⏎············` prettier/prettier
34:30 error Insert `⏎············` prettier/prettier
43:11 warning Disallow self-closing on HTML void elements (
) vue/html-self-closing
47:11 warning Disallow self-closing on HTML void elements (
) vue/html-self-closing
/Users/shigeoka/works/codenote-net/nuxtjs-spa-sandbox/pages/inspire.vue
4:7 warning Disallow self-closing on HTML void elements (![]()
) vue/html-self-closing
✖ 6 problems (3 errors, 3 warnings)
3 errors and 3 warnings potentially fixable with the `--fix` option.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] lint: `eslint --ext .js,.vue --ignore-path .gitignore .`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/shigeoka/.npm/_logs/2019-07-08T13_20_09_206Z-debug.log
error Insert `/` prettier/prettier と、
ESLint の warning Disallow self-closing on HTML void elements (
) vue/html-self-closing が競合するのでどちらかを修正すると、もう片方の error/warning が発生するという状況でした。
.eslintrc.js に vue/html-self-closing ルール追加
ESLint と prettier を共存させるために、デフォルト設定から html.void: ‘always’ に変更しています。
rules: {
'vue/html-self-closing': [
'error',
{
html: {
void: 'always',
normal: 'always',
component: 'always'
},
svg: 'always',
math: 'always'
}
]
}
Added the vue/html-self-closing rule to .eslintrc.js · codenote-net/nuxtjs-spa-sandbox@a147faf
ESLint, Prettier エラー修正
npm run lint で ESLint と Prettier のエラーがいくつか出るので修正します。
$ npm run lint
> [email protected] lint /Users/shigeoka/works/codenote-net/nuxtjs-spa-sandbox
> eslint --ext .js,.vue --ignore-path .gitignore .
/Users/shigeoka/works/codenote-net/nuxtjs-spa-sandbox/components/VuetifyLogo.vue
2:3 error Require self-closing on HTML void elements (![]()
) vue/html-self-closing
6:3 error Insert `/` prettier/prettier
/Users/shigeoka/works/codenote-net/nuxtjs-spa-sandbox/pages/index.vue
25:26 error Insert `⏎············` prettier/prettier
34:30 error Insert `⏎············` prettier/prettier
✖ 4 problems (4 errors, 0 warnings)
4 errors and 0 warnings potentially fixable with the `--fix` option.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] lint: `eslint --ext .js,.vue --ignore-path .gitignore .`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/shigeoka/.npm/_logs/2019-07-08T12_50_17_439Z-debug.log
修正 commit はこちら 👉 Fixed the prettier errors · codenote-net/nuxtjs-spa-sandbox@f7450eb
以上、Nuxt.js で ESLint と Prettier を共存していきたい、現場からお送りしました。
