こんにちは、樋口です。
今回は、Nuxt.jsのeslint機能によって出力されるエラーの解決策を記載いたします。
※ 今回は「npm」コマンドを使用して説明を行います。
エラー内容（error Insert `·` prettier/prettier）
ソースを実行した際に下記エラーが発生してしまいました。
error Insert `·` prettier/prettier
そもそもの原因としては、ソースコードのスペースが適切でないときに出るエラーとなります。
対象業のソースのインデントを直せば解決できますが、今回はソースコードの自動修正によっての問題解決についても記載させていただきます。
エラー発生時の環境
エラー発生時の環境は、下記の通りです。
- Vue.js
- 2.6.11
- Nuxt.js
- 2.12.2
エラー解決方法（package.jsonの修正）
package.jsonに下記内容を追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
・・・・・ "private": true, "scripts": { "dev": "nuxt", "build": "nuxt build", "start": "nuxt start", "generate": "nuxt generate", "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .", "lint:style": "stylelint **/*.{vue,css} --ignore-path .gitignore", "lint": "npm run lint:js && npm run lint:style", "lint": "eslint --ext .js,.vue --ignore-path .gitignore . --fix" ← 追加 }, ・・・・・ |
エラー解決方法（自動修正コマンド実行）
package.jsonの変更が終わったら、下記コマンドの実行を行います。
npm run lint –fix
yarn run lint –fix
実行後、下記画像のようにエラーなくコマンドが終了したら完了です。
確認
再度実行を行いエラーがないことを確認します。
npm run dev
これで無事、解決です。
《関連記事》
- Vue.jsベースのフレームワーク！ Nuxt.jsプラグイン《簡単EXCEL風データ表示》
- Vue.jsベースのフレームワーク！ Nuxt.jsプラグイン《簡単アイコンイメージ》
- 【エラー解決方法】Nuxt.js で「error Insert
⏎prettier/prettier」が発生したときの対処法 - Vue.jsベースのフレームワーク！ Nuxt.jsプラグイン《HTML要素のドラッグアンドドロップ》
- 【エラー解決方法】Nuxt.js で「error ” is assigned a value but never used no-unused-vars」が発生したときの対処法
