create-nuxt-appで作ったプロジェクトが最初からフォーマットエラーを抱えているときの対応

Nuxt.jsのプロジェクトを作成するとき、create-nuxt-appという非常に便利なコマンドがあります。これを使用してプロジェクトを作成しビルドしたらエラーが発生。初めて触ったときにちょっと戸惑ってしまったので、対応方法を記載します。

この記事では扱わないこと

• プロジェクト作成するためのコマンドのインストールなどの前準備。
  • 参考: Nuxt.js はじめました。プロジェクト作成で 5 つの方法を試した。

プロジェクトを作成

さて、プロジェクトを作成します。

このときに eslint と prettier はyesを選択。UI frameworkには vuetify を選択。

起動する

$ yarn run dev でサーバーを立ち上げます。

おや…エラーが…。

ブラウザでページを開いたときも出ています。

原因と対応方法

エラーの内容をよく見てみると

Module Error (from ./node_modules/eslint-loader/index.js) となっていて、赤字になっている部分を見ると prettier/prettier で検知した様子。どうやら eslint と prettier の合わせ技でエラーが発生しているようだということがわかります。

さらに下の方を見ると

17 errors and 0 warnings potentially fixable with the --fix option.

と出ています。ここから、デフォルトで作成されたソースのフォーマットが prettier のルールに反している、ということがわかります。

そこで、--fix オプションをつけた下記コマンドを打ってやることで、エラーが解消されることになります。

$ node_modules/.bin/eslint --fix --ext .js,.vue --ignore-path .gitignore .

このコマンドには prettier というのはまったく登場しませんが、プロジェクト作成時点で eslint のプラグインとして、prettier が設定されているので、上記コマンドで整形が可能になります。設定はプロジェクトルート直下にある .eslintrc.js に記載がされています。

.eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: 'babel-eslint'
  },
  extends: [
    'plugin:vue/recommended',
    'plugin:prettier/recommended'
  ],
  // required to lint *.vue files
  plugins: [
    'vue',
    'prettier' // <- ここ
  ],
  // add your custom rules here
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

最後に

初めてNuxt.jsを触ってみていきなりエラーが出てしまいちょっと焦りましたが、エラー内容をよく読めばすぐ対処できる内容でした。もし同じ挙動に出会って手を止めてしまった方がいましたら、参考にしてもらえると嬉しいです。