v9にバージョンアップするには設定ファイルを書き換えなければならないので、v8に固定（typescriptも依存している為、v5.3に）していました。
レガシー設定(.eslintrc)がいずれサポート外になるので、早めにフラット設定(eslint.config)にしておいた方が良い。
@nuxt/eslintはおすすめ設定がされているが、レガシー設定に対応していない。
という事で、@nuxt/eslintを導入して、フラット設定に書き換えてみました。
バージョンアップ
% yarn upgrade --latest
package.jsonが書き換わる（固定にしてたのから）
- "eslint": "<9.0.0",
+ "eslint": "9.17.0",
- "typescript": "<5.4.0",
+ "typescript": "5.7.2",
lintは想定通りエラーになるが、後で対応するので放置。
% yarn lint $ eslint --ext ".js,.ts,.vue" --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. error Command failed with exit code 2. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
@nuxt/eslint導入
% npx nuxi module add eslint or % yarn add -D @nuxt/eslint eslint typescript
nuxt.config.ts
modules: [
+ '@nuxt/eslint',
'@nuxtjs/i18n',
package.json
- "lint": "eslint --ext \".js,.ts,.vue\" --ignore-path .gitignore .",
- "lint:fix": "yarn lint --fix",
+ "lint": "eslint",
+ "lint:fix": "eslint --fix",
- "eslint": "eslint",
- "eslint:fix": "eslint --fix",
eslintはファイル指定用に定義してましたが、不要になった(lintの方で行けるようになった)ので削除しました。
.eslintrc.js → eslint.config.mjs
- module.exports = {
- root: true,
- env: {
- browser: true,
- es2021: true,
- node: true
- },
- extends: [
- '@nuxtjs/eslint-config-typescript',
- 'plugin:nuxt/recommended',
- 'plugin:vue/vue3-recommended',
- 'plugin:vue/base',
- 'plugin:vuetify/base'
- ],
- plugins: [
- ],
- // add your custom rules here
- rules: {
- 'vue/max-attributes-per-line': 'off',
- 'vue/singleline-html-element-content-newline': 'off',
- 'vue/multi-word-component-names': 'off',
- 'vue/no-reserved-component-names': 'off',
- 'vue/no-multiple-template-root': 'off',
- 'no-lonely-if': 'off'
- }
- }
+ import withNuxt from './.nuxt/eslint.config.mjs' // https://eslint.nuxt.com/packages/module
+ import vuetify from 'eslint-plugin-vuetify' // https://github.com/vuetifyjs/eslint-plugin-vuetify
+
+ export default withNuxt(
+ vuetify.configs['flat/base'],
+ {
+ rules: {
+ 'vue/max-attributes-per-line': 'off',
+ 'vue/singleline-html-element-content-newline': 'off',
+ 'vue/multi-word-component-names': 'off',
+ 'vue/no-reserved-component-names': 'off',
+ 'vue/no-multiple-template-root': 'off',
+ 'no-lonely-if': 'off',
+ '@typescript-eslint/no-explicit-any': 'off',
+ 'no-console': 'error',
+ 'no-throw-literal': 'error'
+ }
+ }
+ )
rootは廃止、envは不要、extendsの書き方も変わっています。
vuetify以外のextendsは、@nuxt/eslintに含まれている。
rulesの下3つは挙動が変わったので、追加しています。
package.json
下記は不要になったので削除
- "@nuxtjs/eslint-config-typescript": "^12.1.0",
- "eslint-plugin-nuxt": "^4.0.0",
lint修正
% yarn lint $ eslint 2:1 warning Unused eslint-disable directive (no problems were reported from 'import/namespace') 1:1 warning Unused eslint-disable directive (no problems were reported from 'import/named')
下記のルールは追加せずにコメントを削除する事にしました。
- // eslint-disable-next-line import/named
- // eslint-disable-next-line import/namespace
