Provide support for eslint 9's flat configuration

[ajmas]

It is not clear whether vue-eslint-parser supports eslint 9's flat configuration, but the current issue I am running into suggest that flat configuration may not be supported.

I currently have the following eslint.config.js:

import importPlugin from 'eslint-plugin-import';
import vueParser from 'vue-eslint-parser';
import tsParser from '@typescript-eslint/parser';
import tsPlugin from '@typescript-eslint/eslint-plugin';
import { FlatCompat } from '@eslint/eslintrc';
import path from 'path';
import { fileURLToPath } from 'url';

// mimic CommonJS variables -- not needed if using CommonJS
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname
});

export default [
  ...compat.extends('plugin:vue/vue3-recommended'),
  {
    files: [
      '**/*.vue', '**/*.js', '**/*.jsx', '**/*.cjs', 
      '**/*.mjs', '**/*.ts', '**/*.tsx', '**/*.cts', 
      '**/*.mts'
   ],
    ignores: ['.gitignore'],
    plugins: {
      import: importPlugin,
      '@typescript-eslint': tsPlugin
    },
    languageOptions: {
      parser: vueParser,
      parserOptions: {
        parser: tsParser
      },
      ecmaVersion: 'latest',
    },
    rules: {
      // allow async-await
      'generator-star-spacing': 'off',
      // allow paren-less arrow functions
      'arrow-parens': 'off',
      'one-var': 'off',
      'no-void': 'off',
      'multiline-ternary': 'off',

      'import/first': 'off',
      'import/namespace': 'error',
      'import/default': 'error',
      'import/export': 'error',
      'import/extensions': 'off',
      'import/no-unresolved': 'off',
      'import/no-extraneous-dependencies': 'off',
      'prefer-promise-reject-errors': 'off',
      'space-before-function-paren': 'error',
      semi: [2, 'always'],
      indent: ['error', 2],
      'vue/multi-word-component-names': 'warn',

      // TypeScript
      quotes: ['warn', 'single', { avoidEscape: true }],
      '@typescript-eslint/explicit-function-return-type': 'off',
      '@typescript-eslint/explicit-module-boundary-types': 'off',
      '@typescript-eslint/no-unnecessary-type-assertion': 'off',
      '@typescript-eslint/no-unsafe-assignment': 'off',
      '@typescript-eslint/no-unsafe-member-access': 'off',
      '@typescript-eslint/no-unsafe-call': 'off',
      '@typescript-eslint/no-explicit-any': 'off',
      '@typescript-eslint/restrict-template-expressions': 'off',
      '@typescript-eslint/no-misused-promises': 'off',
      '@typescript-eslint/no-unsafe-argument': 'off',

      'vue/singleline-html-element-content-newline': 'off',
      'vue/max-attributes-per-line': 'off',

      // allow debugger during development only
      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
    }
  }
];

This is currently giving me errors of the type:

35:38 error Parse errors in imported module 'vue': parserPath or languageOptions.parser is required! (undefined:undefined) import/namespace 36:31 error Parse errors in imported module 'vue': parserPath or languageOptions.parser is required! (undefined:undefined) imp

Related dependencies:

    "@vue/cli-service": "~5.0.8",
    "@vue/eslint-config-prettier": "^9.0.0",
    "@vue/eslint-config-typescript": "^13.0.0",
    "@vue/tsconfig": "^0.5.1",
    "eslint": "^9.2.0",
    "eslint-config-standard": "^17.0.0",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-n": "^17.4.0",
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-vue": "^9.10.0",

[abdul-alhasany]

You are using eslint-plugin-import which does not support flat config yet. That could be the issue.

[ajmas]

Thanks. I’ll explore this as a possibility. Short term I’ve downgraded back to eslint 8.