Nuxt.jsの「No ESLint configuration found.」への対処法

2019年12月11日カテゴリー：Web系, 技術系コメント : 0

０，目次

はじめに
原因
対処
対処２
参考文献

１，はじめに

Nuxt.jsを導入すべく、Vue-cliをMac OSに導入しました。

そして、下記の記事を参考にNuxt.jsのサンプルアプリの起動を試みました。

Nuxt.js使ってみた - Qiita

しかし、開発サーバーの起動を行うと、

以下のようなエラーが表示されました。

jskny@MacBook-Air byakko % npm run dev

> byakko@1.0.0 dev /Users/jskny/Documents/Workspace/Project/byakko
> nuxt


   ╭─────────────────────────────────────────────╮
   │                                             │
   │   Nuxt.js v2.10.2                           │
   │   Running in development mode (universal)   │
   │                                             │
   │   Listening on: http://localhost:3000/      │
   │                                             │
   ╰─────────────────────────────────────────────╯

ℹ Preparing project for development                                   17:34:59
ℹ Initial build may take a while                                      17:34:59
✔ Builder initialized                                                 17:35:00
✔ Nuxt files generated                                                17:35:00

✖ Client
  Compiled with some errors in 2.70s

✔ Server
  Compiled successfully in 2.20s


ERROR  Failed to compile with 1 errors               friendly-errors 17:35:03

Module build failed (from ./node_modules/eslint-loader/index.js):
Error: No ESLint configuration found.

本稿では、このエラーへの対処を行います。

２，原因

この件につきまして、GitHub上に参考となる文献がありました。

Examples: Error: No ESLint configuration found · Issue #19 · apexcharts/vue-apexcharts · GitHub

それによりますと、

Try creating a file named .eslintrc.json in the root of examples directory and input something in the file
https://github.com/apexcharts/vue-apexcharts/issues/19#issuecomment-431300373

すなわち「.eslintrc.json」ファイルを、

Nuxt.jsのプロジェクトフォルダに配置してないからエラーになっている、とのことです。

３，対処

他の情報も探していますと、

具体的な解決策を見つけてくださった方がおりました。

Nuxt.js 初期設定＆トラブルシューティング - Qiita

以下の内容のファイルをNuxt.jsのフォルダ内に配置します。

ファイル名	配置先
.eslintrc.json	プロジェクトディレクトリの直下

module.exports = {
  root: true,
  parser: 'babel-eslint',
  env: {
    browser: true,
    node: true
  },
  extends: 'standard',
  // required to lint *.vue files
  plugins: [
    'html'
  ],
  // add your custom rules here
  rules: {},
  globals: {}
}

しかし、これだけではサンプルアプリは起動しませんでした。

４，対応２

npm run devで開発サーバーを起動しようとしたところ、

モジュールが見当たりませんというエラーが多発しました。

eslint関連のプラグインを導入し、対処しました。

以下が、私が対応のために実行したコマンドです。

npm install eslint-plugin-html
npm install eslint-config-standard
npm install eslint-plugin-import
npm install eslint-plugin-node
npm install eslint-plugin-promise
npm install eslint eslint-plugin-node
npm install eslint-plugin-standard
npm install eslint-loader

以上を実行し、とりあえず、開発サーバーは起動するようになりました。

ですが、Vueのコードの検査エラーとして、以下のメッセージは表示されます。

Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment

完全解決までは至りませんが、

設定ファイルの作成と、モジュールの導入を行えば、

少なくとも、一歩先へと進めるはずです。

５，参考文献

Tag : javascript, mac, Nuxt.js, Vue.js 作成者 : jskny

Sysrigar