Nuxt.js で ESLintとPrettier を導入がうまくいかない

nuxt-iconの画像プログラミング

Nuxt.jsでESLint、Prettierを導入した際に下記エラーが出た時の対応の備忘録です。

公式サイトを確認したい人はこちらのリンク先を確認ください。

スポンサーリンク

npm ERR! @1.0.0 lint: eslint --ext .js,.vue --ignore-path .gitignore .

$ npm run dev

フォーマットエラーが吐かれ、localhostでサイトにサクセスできません。

こういったエラーがコンソールに表示される場合、ESLint、Prettierの導入がうまくいっていません。

対処方法

やることは至ってシンプルです。下記の2点だけです。

  • package.jsonの修正
$ npm run lint  or npm run lintfix

で実行できるようなります。

〜〜〜
"scripts": {
〜〜〜
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore .",
〜〜〜
  },

ただ少し問題が残っています。各種エディタ(VSCodeとか)を使用している場合、各PJ毎に”.editorconfig”があると思いますので、保存時はVSCodeのコードのフォーマット修正が使われてしまいます。また、”npm run dev”を実行したタイミングで自動でeslintを実行してもらわないとコード修正をしたら、フォーマット修正するという作業が発生してしまいます。

そのため、nuxt.config.jsに保存時にESLintを実行するためのコードを追記します。

  • nuxt.config.jsの修正
extend(config, ctx) {
  // Run ESLint on save
  if (ctx.isDev && ctx.isClient) {
    config.module.rules.push({
      enforce: "pre",
      test: /\.(js|vue)$/,
      loader: "eslint-loader",
      exclude: /(node_modules)/
    })
  }
}

ですが、これでできないのは俺だけ?

いろんなサイト(公式含め)でこの方法が紹介されていますが、できないので諦めてVSCodeのプラグインに頼りました。

  • ESLint
  • Prettier

上記2点のプラグインを導入しコード保存時に自動的にフォーマット修正ができるようになりました。

以上、めでたしめでたし。

皆はどうやってるんでしょうかねー

webpackの拡張がうまくいかない。。。。

コメント