[Nuxt.js] npx create-nuxt-app 後の ESLint, Prettier エラーの解決方法

Tadashi Shigeoka ·  Thu, July 4, 2019

Nuxt.js で npx create-nuxt-app 後に ESLint と Prettier を併用してる関係でエラーが発生する問題の解決方法をご紹介します。

Nuxt.js

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 を共存していきたい、現場からお送りしました。