ESLint v9 support

[cexbrayat]

ESLint v9 has been released and we'll need to change a few things to properly support it.

npm run lint currently fails to run with eslint v9:

❯ npm run lint

> eslint-with-prettier@0.0.0 lint
> eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore

Invalid option '--ext' - perhaps you meant '-c'?
You're using eslint.config.js, some command line flags are no longer available. Please see https://eslint.org/docs/latest/use/command-line-interface for details.

We'll also probably need to migrate the configuration file to use the flat config format:

• https://eslint.org/docs/latest/use/configure/migration-guide

[JoostKersjes]

See #451 for supporting the new default "Flat Config Files".

[jez9999]

I'd definitely like to see the project scaffolds using the flat config format ASAP. It greatly reduces the complexity of configuring ESLint, as well as setting a bunch of reasonable defaults the old system didn't and organizing things better.

[lovetingyuan]

+1 @sodatea

[mr-boost]

If it can help, this is the flat config that works for me in a Vue3, Typescript, Prettier setup:

It works with eslint 8.57.0 and the following: typescript-eslint 7.14.1 eslint-plugin-vue 9.26.0 vue-eslint-parser 9.4.3 eslint-config-prettier 9.1.0 prettier 3.3.2 typescript: 5.5.2

As for upgrading to eslint 9.0; the bottleneck is the release of the stable version 8 of typescript-eslint. So I prefer to wait until that is released before upgrading to eslint 9.

eslint.config.mjs

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';
import pluginVue from 'eslint-plugin-vue';
import vueparser from 'vue-eslint-parser';
import eslintConfigPrettier from "eslint-config-prettier";

export default [
  {
    ignores: ["dist/*"]
  },
  // add more generic rulesets here, such as:
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  ...pluginVue.configs['flat/essential'],
  {
    rules: {
      // override/add rules settings here, such as:
      '@typescript-eslint/no-explicit-any': 'warn',
      '@typescript-eslint/no-unused-vars': 'warn',
      'no-irregular-whitespace': 'warn',
    },
    languageOptions: {
      parser: vueparser,
      parserOptions: {
        parser: tseslint.parser
      }
    },
    plugins: {
      vue: pluginVue
    }
  },
  eslintConfigPrettier,
]

And this should be updated in package.json: "lint": "eslint . --fix",

Hope this helps