Posted at

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

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


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


プロジェクトを作成

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

1. sasakiryousuke@sasaki-ryouhiroshi-no-imac: ~:Develop:sandbox (node) 2018-10-13 13-29-33.png

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


起動する

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

1. sasakiryousuke@sasaki-ryouhiroshi-no-imac: ~:Develop:sandbox:test (node) 2018-10-14 09-20-26.png

おや…エラーが…。

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

test 2018-10-14 09-23-55.png


原因と対応方法

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

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

さらに下の方を見ると

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