Nuxt の ESLint モジュールが Flat Config に対応していたので新しい構成に移行する

• Nuxt ESLint

環境

• Nuxt - 3.11.1
• @nuxt/eslint - 0.3.0-beta.6
• ESLint - 8.57.0
• Node.js - 20.12.0
• pnpm - 8.15.5

パッケージの追加と削除

module.exports = {
  extends: ['eslint:recommended', '@nuxt/eslint-config', 'prettier'],
  rules: {
    'vue/component-tags-order': [
      'error',
      { order: ['script', 'template', 'style'] },
    ],
  },
}

$ pnpm add -D @nuxt/eslint
$ pnpm remove @nuxt/eslint-config eslint-config-prettier

export default defineNuxtConfig({
  modules: [
    '@nuxt/eslint',
    ...
  ],
  ...,
})

ESLintの設定を書き換える

import withNuxt from './.nuxt/eslint.config.mjs'
export default withNuxt()

import withNuxt from './.nuxt/eslint.config.mjs'
export default withNuxt({
  files: ['**/*.vue'],
  rules: {
    'vue/component-tags-order': [
      'error',
      { order: ['script', 'template', 'style'] },
    ],
  },
})

import withNuxt from './.nuxt/eslint.config.mjs'
export default withNuxt({
  files: ['**/*.vue'],
  rules: {
    'vue/component-tags-order': [
      'error',
      { order: ['script', 'template', 'style'] },
    ],
  },
}).override('nuxt:typescript', {
  rules: {
    '@typescript-eslint/ban-ts-comment': [
      'error',
      {
        'ts-expect-error': 'allow-with-description',
        'ts-ignore': 'allow-with-description',
        'ts-nocheck': false,
        'ts-check': false,
      },
    ],
  },
})

ESLintを実行するコマンドを変更する

{
  "scripts": {
    "lint": "eslint \"**/*.{js,cjs,mjs,ts,cts,mts,vue}\"",
    "lint:fix": "eslint \"**/*.{js,cjs,mjs,ts,cts,mts,vue}\" --fix",
    ...
  }
}

$ pnpm lint

VSCode用の設定を追加する

{
  "eslint.experimental.useFlatConfig": true,
  ...
}