Eslint 9.0 released and the flat configuration format

[davidwessman]

Hello 🙂

Now eslint 9.0 is released ( https://eslint.org/blog/2024/04/eslint-v9.0.0-released/) Would be great to add an example in the README of using this plugin with the flat config - I have not been able to figure it out yet.

Would be grateful if anyone found a working configuration 🙂

[m-shum]

Seconded. Now using the flat config and can't work out how to add this module.

[lvzhenbo]

I think the two upstream dependencies have been updated long ago, maybe the maintainers are waiting for @vue/eslint-config-typescript to be updated along with them The related flat configurations can be found at https://github.com/prettier/eslint-config-prettier#installation and https://github.com/prettier/eslint-plugin-prettier#configuration-new-eslintconfigjs

[bamf2077]

eslint.config.js for Vue 3.x project is much more complicated, you need to install devDependencies with package manager you like first:

pnpm add -D @eslint/eslintrc @eslint/js @vue/eslint-config-prettier @vue/eslint-config-typescript eslint eslint-plugin-oxlint eslint-plugin-vue globals

import { FlatCompat } from '@eslint/eslintrc'
import ESLint from '@eslint/js'
import Oxlint from 'eslint-plugin-oxlint'
import Vue from 'eslint-plugin-vue'
import globals from 'globals'
import { dirname } from 'node:path'
import { fileURLToPath } from 'node:url'

const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)
const compat = new FlatCompat({ baseDirectory: __dirname })

export default [
  {
    // config with just ignores is the replacement for `.eslintignore`
    ignores: ['{dist,public}/**/*'],
  },
  ESLint.configs.recommended,
  ...Vue.configs['flat/recommended'],
  // uncomment next line for TypeScript project
  // ...compat.extends('@vue/eslint-config-typescript/recommended'),
  Oxlint.configs['flat/recommended'],
  ...compat.extends('@vue/eslint-config-prettier/skip-formatting'),
  {
    files: ['**/*.{js,mjs,cjs,jsx,vue}'], // append `ts,mts,cts,tsx` for TypeScript project
    linterOptions: {
      reportUnusedDisableDirectives: true,
    },
    languageOptions: {
      globals: {
        ...globals.node,
        ...globals.browser,
        ...globals.es2021,
      },
    },
    plugins: {},
    rules: {},
  },
]

---

eslint.config.js for vanilla TypeScript project:

pnpm add -D @eslint/js eslint eslint-config-prettier eslint-plugin-oxlint globals typescript-eslint

import ESLint from '@eslint/js'
import ESLintConfigPrettier from 'eslint-config-prettier'
import Oxlint from 'eslint-plugin-oxlint'
import globals from 'globals'
import TSESLint from 'typescript-eslint'

export default TSESLint.config(
  {
    // config with just ignores is the replacement for `.eslintignore`
    ignores: ['{dist,public}/**/*'],
  },
  ESLint.configs.recommended,
  ...TSESLint.configs.recommended,
  Oxlint.configs['flat/recommended'],
  ESLintConfigPrettier,
  {
    files: ['**/*.{js,mjs,cjs,jsx,ts,mts,cts,tsx}'],
    linterOptions: {
      reportUnusedDisableDirectives: true,
    },
    languageOptions: {
      globals: {
        ...globals.node,
        ...globals.browser,
        ...globals.es2021,
      },
    },
    plugins: {},
    rules: {},
  },
)

[ehehaye]

Any progress yet?

[davidwessman]

Ours looks like this now:

const FlatCompat = require("@eslint/eslintrc").FlatCompat;
const globals = require("globals");
const js = require("@eslint/js");
const pluginVue = require("eslint-plugin-vue");
const ts = require("typescript-eslint");
const eslintConfigPrettier = require("eslint-config-prettier");
const parser = require("vue-eslint-parser");
const ext = require("eslint-plugin-ext");

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

module.exports = [
  js.configs.recommended,
  ...pluginVue.configs["flat/recommended"],
  ...ts.configs.recommended,
  eslintConfigPrettier,
  ...compat.extends("@vue/eslint-config-prettier/skip-formatting"),

  {
    ignores: [
      "**/javascript/src/vendor/*",
      "**/javascript/src/config.js",
      "**/eslint.config.js",
    ],
  },

  {
    plugins: {
      ext: ext,
    },

    files: ["app/javascript/src/**/*.js", "app/javascript/src/**/*.vue"],

    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node,
        ...globals.amd,
        ...globals.jquery,

        Vue: "readonly",
        axios: "readonly",
        _: "readonly",
      },

      // ecmaVersion: 2020,
      sourceType: "module",
      parser: parser,
    },

    rules: {
      "vue/no-unused-vars": "error",
      "vue/padding-line-between-tags": "warn",
      "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
      "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",

      "ext/lines-between-object-properties": [
        "error",
        "always",
        { exceptBetweenSingleLines: true },
      ],
    },

    settings: {
      "import/resolver": {
        alias: {
          map: [["@", "./app/javascript/src"]],
        },
      },
    },
  },
];