[Nuxt.js] How to Fix ESLint and Prettier Errors After npx create-nuxt-app
This article introduces how to fix errors that occur due to using ESLint and Prettier together after npx create-nuxt-app in Nuxt.js.
Nuxt.js Initial Setup
$ 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 errors
Right after npx create-nuxt-app, the web app won’t start due to lint errors even when running npm run dev.
$ 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 conflicts with ESLint’s warning Disallow self-closing on HTML void elements (
) vue/html-self-closing, creating a situation where fixing one would trigger an error/warning from the other.
Add vue/html-self-closing Rule to .eslintrc.js
To make ESLint and prettier coexist, I changed from the default setting to 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
Fix ESLint and Prettier Errors
Several ESLint and Prettier errors appear when running npm run lint, so I fixed them.
$ 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
Fix commit here ? Fixed the prettier errors · codenote-net/nuxtjs-spa-sandbox@f7450eb
That’s all from the Gemba on making ESLint and Prettier coexist in Nuxt.js.