.eslintrcが廃止されるらしいのでFlat Configに置き換える

env:
  browser: true
  es2021: true
plugins:
  - vue
  - '@typescript-eslint'
extends:
  - 'plugin:vue/vue3-recommended'
  - 'eslint:recommended'
  - '@vue/typescript/recommended'
  - 'prettier'
parserOptions:
  ecmaVersion: 12
rules: {}

yarn up eslint

# .eslint.ymlの部分は自分の環境に合わせて変更 (.eslintrc.jsonなど)
npx @eslint/migrate-config .eslintrc.yml

yarn add -D globals @eslint/js @eslint/eslintrc

yarn lint # eslint --fix resources/**/*.{ts,vue}が入ってます


Oops! Something went wrong! :(

ESLint: 9.15.0

TypeError: Error while loading rule '@typescript-eslint/no-empty-function': Cannot read properties of undefined (reading 'allow')

yarn up @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/eslint-config-prettier @vue/eslint-config-typescript eslint-plulgin-vue
# @vue-eslint-config-prettierはv3.x以降のPrettierが対象なので、こちらも更新
yarn up prettier

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './recommended' is not defined by "exports" in /home/nonuplet/Github/rirfee-dev/webroot/node_modules/@vue/eslint-config-typescript/package.json

import vue from "eslint-plugin-vue";
import typescriptEslint from "@typescript-eslint/eslint-plugin";
import globals from "globals";
import path from "node:path";
import { fileURLToPath } from "node:url";
import js from "@eslint/js";
import { FlatCompat } from "@eslint/eslintrc";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const compat = new FlatCompat({
    baseDirectory: __dirname,
    recommendedConfig: js.configs.recommended,
    allConfig: js.configs.all
});

export default [...compat.extends(
    "plugin:vue/vue3-recommended",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "prettier",
), {
    plugins: {
        vue,
        "@typescript-eslint": typescriptEslint,
    },

    languageOptions: {
        globals: {
            ...globals.browser,
        },

        ecmaVersion: 12,
        sourceType: "script",
    },

    rules: {},
}];

env:
  browser: true
  es2021: true
parserOptions:
  ecmaVersion: 12

import globals from 'globals'

export default [
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.es2021,
      },
      parserOptions: {
        ecmaVersion: 12,
      }
    },
  },
]

plugins:
  - vue
  - '@typescript-eslint'

...
import tsLint from '@typescript-eslint/eslint-plugin'

export default [
  {
    plugins: {
      // eslint-plugin-vueのドキュメントを見ると、pluginにvueを記述するのは不要のようです
      '@typescript-eslint/eslint-plugin': tsLint,
    },
    ...
  }
]

extends:
  - 'plugin:vue/vue3-recommended'
  - 'eslint:recommended'
  - '@vue/typescript/recommended'
  - 'prettier'

...
import pluginVue from 'eslint-plugin-vue'
import tsLint from '@typescript-eslint/eslint-plugin'
import js from '@eslint/js'
import vueTsEslintConfig from '@vue/eslint-config-typescript'
import prettierConfig from '@vue/eslint-config-prettier'

export default [
  ...pluginVue.configs['flat/recommended'],
  js.configs.recommended,
  ...vueTsEslintConfig(),
  prettierConfig,
  {
    ...
  }
]

import globals from 'globals'
import pluginVue from 'eslint-plugin-vue'
import tsLint from '@typescript-eslint/eslint-plugin'
import js from '@eslint/js'
import vueTsEslintConfig from '@vue/eslint-config-typescript'
import prettierConfig from '@vue/eslint-config-prettier'

export default [
  ...pluginVue.configs['flat/recommended'],
  js.configs.recommended,
  ...vueTsEslintConfig(),
  prettierConfig,
  {
    plugins: {
      '@typescript-eslint/eslint-plugin': tsLint,
    },
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.es2021,
      },
      parserOptions: {
        ecmaVersion: 12,
      },
    },
  },
]

  74:9   error    Elements in iteration expect to have 'v-bind:key' directives  

Oops! Something went wrong! :(

ESLint: 9.15.0

TypeError: Error while loading rule '@typescript-eslint/no-unused-expressions': Cannot read properties of undefined (reading 'allowShortCircuit')