【備忘録】VScodeでESLintの設定ファイルエラーが出たので解決してみた

エラーが発生

フロントエンド開発を思い立ちVue.js＋viteで色々遊んでいたところ、run dev時にVueファイルで大量のエラーが発生。

全コンポーネントで発生している様子。設定ファイルに問題がありそうなエラーなので、備忘録ついでに解決方法をまとめておきました。

解決方法

エラーログ周りを眺めていると、こんなエラーが出ていました。

Parsing error: 
You appear to be using a native ECMAScript module 
configuration file, which is only supported when
running Babel asynchronously or when using the Node.js
`--experimental-require-module` flag.

どうやら、Node.jsの--experimental-require-moduleフラグ
を使用してくださいと言われているようですね。

より調べてみると、どうやらVscodeの拡張機能ESLintのECMAScriptモジュール（ESM）の設定ファイルを適切に処理できていないことが原因のようですね。

原因も分かったので、さっそく対応してみましょう。

• ESLint設定ファイルを追加
  .eslintrc.jsを直下ディレクトリに追加して、以下の内容を追加します。

module.exports = {
  // root: true
  // ESLintが親ディレクトリの設定ファイルを探すのを停止する
  // これを設定することで、プロジェクト固有の設定のみが適用される
  root: true,
  
  // env: 環境変数を設定
  env: {
    node: true,      // Node.js のグローバル変数（require, process など）を有効化
    browser: true,   // ブラウザのグローバル変数（window, document など）を有効化
    es2021: true     // ES2021の文法を有効化（最新のJavaScript機能が使える）
  },
  
  // extends: 既存の設定を継承
  extends: [
    'plugin:vue/vue3-essential',  // Vue.js 3の必須ルールセット
    'eslint:recommended'          // ESLintの推奨ルールセット
  ],
  
  // parserOptions: パーサーの設定
  parserOptions: {
    ecmaVersion: 'latest',   // 最新のECMAScriptバージョンを使用
    sourceType: 'module'     // ESモジュール（import/export）を使用可能に
  },
  
  // rules: 個別のルール設定
  rules: {
    // Vueコンポーネント名を複数単語にする必要があるルールを無効化
    // (例: 'MyComponent' は OK だが、'Button' は NG というルール)
    'vue/multi-word-component-names': 'off'
  }
}

設定ファイルの詳細はClaudeに教えてもらいました（笑）。

さて、このファイルを追加すると、、、

エラーが消えていました！！

Vueプロジェクトをviteで立ち上げると、ESLint設定は含まれないそうです。

ですが、VScode側ではあらかじめESLint拡張機能をインストールしていたので、VScode側が自動的にESLintを探して見当たらないのでエラーが出ていたようですね。

なるほど、勉強になりますね！