ESLint v9への移行

1つのリポジトリで試行。まず eslint-plugin-import が対応していない。一旦スキップ。

別のリポジトリで試行。

Oops! Something went wrong! :(

ESLint: 9.1.1

Error: Could not find config file.

原因はファイル形式。このリポジトリではJSON形式を使っていたが、JavaScript形式以外の設定がなくなった。なんと。

一旦スキップ。

Hideki Ikemoto

ESLINT_USE_FLAT_CONFIG=true を入れればv8のまま新しい形式が試せるということなので、他のリポジトリで試してみる。

まず --ext オプションがなくなっているので一旦削除。
それからファイル名を .eslintrc.cjs から eslint.config.cjs にリネーム(ESM対応は後で)

Hideki Ikemoto

次はこんなエラーが出た。

> ESLINT_USE_FLAT_CONFIG=true eslint .


Oops! Something went wrong! :(

ESLint: 8.57.0

A config object is using the "env" key, which is not supported in flat config system.

Flat config uses "languageOptions.globals" to define global variables for your files.

Please see the following page for information on how to convert your config object into the correct format:
https://eslint.org/docs/latest/use/configure/migration-guide#configuring-language-options

URLはこれ。

どうやらglobalsというライブラリを入れる必要がありそう。
https://www.npmjs.com/package/globals

こうなってたのが、

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  ...
}

こうなった(ESM対応は後で)。

const globals = require("globals");

module.exports = {
  languageOptions: {
    globals: {
      ...globals.browser,
      ...globals.es2021,
      ...globals.node,
    },
  },
  ...
}

Hideki Ikemoto

次はこのエラー。

> ESLINT_USE_FLAT_CONFIG=true eslint .


Oops! Something went wrong! :(

ESLint: 8.57.0

A config object is using the "extends" key, which is not supported in flat config system.

Instead of "extends", you can include config objects that you'd like to extend from directly in the flat config array.

Please see the following page for more information:
https://eslint.org/docs/latest/use/configure/migration-guide#predefined-and-shareable-configs

対応したいが先にESMにする。

eslint.config.cjs → eslint.config.js にする(すでに "type": "module" なので)
module.exports = → export default にする
const globals = require("globals"); → import globals from "globals"; にする

Hideki Ikemoto

extends 対応したいが、先にArrayにする。

export default {
  ...
}

これを

export default [
  {
    ...
  }
]

とした。エラーの内容は変わらないことを確認済み。

現在のTODOは次の2つ。

extends のエラー
--ext がなくなったことに対する対応

Hideki Ikemoto

このエラーの解消。

> ESLINT_USE_FLAT_CONFIG=true eslint .


Oops! Something went wrong! :(

ESLint: 8.57.0

A config object is using the "extends" key, which is not supported in flat config system.

Instead of "extends", you can include config objects that you'd like to extend from directly in the flat config array.

Please see the following page for more information:
https://eslint.org/docs/latest/use/configure/migration-guide#predefined-and-shareable-configs

このように設定されている。

extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],

このうちeslint:recommendedについてはリンク先にあるように、 @eslint/js を入れて設定。あと@types/eslint__jsも必要そう。

plugin:@typescript-eslint/recommended についてはtypescript-eslintのGetting Startedにあるように、 typescript-eslint パッケージを入れて設定。

extendsを削除して、最終的にこうなった。

import eslint from "@eslint/js";
import tseslint from "typescript-eslint";

export default [
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  // 以下既存の設定
];

Hideki Ikemoto

次はこのエラー。 overrides は未使用だったので削除。

> ESLINT_USE_FLAT_CONFIG=true eslint .


Oops! Something went wrong! :(

ESLint: 8.57.0

A config object is using the "overrides" key, which is not supported in flat config system.

Flat config is an array that acts like the eslintrc "overrides" array.

Please see the following page for information on how to convert your config object into the correct format:
https://eslint.org/docs/latest/use/configure/migration-guide#glob-based-configs

Hideki Ikemoto

次はこのエラー。 parser: "@typescript-eslint/parser" となっているのが原因。ただ先ほどのtypescript-eslintの設定にはなかったので、できているはずと判断して単に消す。

> ESLINT_USE_FLAT_CONFIG=true eslint .


Oops! Something went wrong! :(

ESLint: 8.57.0

A config object is using the "parser" key, which is not supported in flat config system.

Flat config uses "languageOptions.parser" to override the default parser.

Please see the following page for information on how to convert your config object into the correct format:
https://eslint.org/docs/latest/use/configure/migration-guide#custom-parsers

Hideki Ikemoto

次はこのエラー。

> ESLINT_USE_FLAT_CONFIG=true eslint .


Oops! Something went wrong! :(

ESLint: 8.57.0

A config object is using the "parserOptions" key, which is not supported in flat config system.

Flat config uses "languageOptions.parserOptions" to specify parser options.

Please see the following page for information on how to convert your config object into the correct format:
https://eslint.org/docs/latest/use/configure/migration-guide#configuring-language-options

parserOptions の内容をそのまま languageOptions に移せば良さそう。

Hideki Ikemoto

次はこのエラー。

> ESLINT_USE_FLAT_CONFIG=true eslint .


Oops! Something went wrong! :(

ESLint: 8.57.0


A config object has a "plugins" key defined as an array of strings.

Flat config requires "plugins" to be an object in this form:

    {
        plugins: {
            @typescript-eslint: pluginObject
        }
    }

Please see the following page for information on how to convert your config object into the correct format:
https://eslint.org/docs/latest/use/configure/migration-guide#importing-plugins-and-custom-parsers

If you're using a shareable config that you cannot rewrite in flat config format, then use the compatibility utility:
https://eslint.org/docs/latest/use/configure/migration-guide#using-eslintrc-configs-in-flat-config

リンク先はこの2つ。下は今回該当しない。

説明を読むと、pluginsでプラグインの実体を読み込み、extendsで設定を読み込むようになっている。 plugins: ["@typescript-eslint", "simple-import-sort"] と書かれていたが、このうち @typescript-eslint はすでに設定済みなので削除。 "simple-import-sort" の実体はeslint-plugin-simple-import-sortだが、この対応のみ必要。

ArrayからObjectに変わっているので、こんな感じに設定した。

import simple_import_sort from "eslint-plugin-simple-import-sort";

export default [
  ...
  {
    plugins: {
      "simple-import-sort": simple_import_sort,
    },
  }
]

Hideki Ikemoto

これで動くようになった。 eslint-plugin-simple-import-sort については動作も確認。

ただ、 @typescript-eslint/ban-types @typescript-eslint/no-explicit-any のエラーがたくさん出るようになった。

recommendedの設定を見ると、新旧で使っている設定に違いがなさそうなのでこれではない。

エラーを見ると .astro/types.d.ts でエラーになっている。このファイルは元々チェック対象ではなかったので、除外設定が必要そう。

Ignoring Filesに次の記述があった。ドットファイルは無視されなくなったとのこと。

In flat config , dotfiles (e.g. .dotfile.js) are no longer ignored by default. If you want to ignore dotfiles, add an ignore pattern of "**/.*".

最終的にこうなった。注意点としては独立したオブジェクトとして指定しないといけない。

  {
    ignores: [".astro"],
  },

つまりこういうのはダメ。

export default [
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  {
    ... // 他の設定
    ignores: [".astro"],
  }
];

ちなみに最初に書いても最後に書いてもどちらでも除外されました。例では最後に書いているので、踏襲します。

Hideki Ikemoto

ESLINT_USE_FLAT_CONFIG=true eslint . --debug で詳細な動作確認。

.ts, .js, .cjs については --ext の代替である files を指定しなくても対象になっていた。理由は調査していないが、おそらく typescript-eslint の設定に含まれているのだろう。

Hideki Ikemoto

typescript-eslint により、以下のパッケージが不要になった。

@typescript-eslint/eslint-plugin
@typescript-eslint/parser

Hideki Ikemoto

最終的な結果。

設定ファイル。

import eslint from "@eslint/js";
import simple_import_sort from "eslint-plugin-simple-import-sort";
import globals from "globals";
import tseslint from "typescript-eslint";

export default [
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  {
    languageOptions: {
      ecmaVersion: "latest",
      sourceType: "module",
      globals: {
        ...globals.browser,
        ...globals.es2021,
        ...globals.node,
      },
    },
    plugins: {
      "simple-import-sort": simple_import_sort,
    },
    rules: {
      "simple-import-sort/imports": "error",
      "simple-import-sort/exports": "error",
    },
  },
  {
    ignores: [".astro"],
  },
];

package.jsonのscriptのコマンド

before: eslint . --ext .js --ext .ts --ext .tsx --ext .jsx --ext .cjs
after: ESLINT_USE_FLAT_CONFIG=true eslint .

パッケージ増減(いずれもdevDependencies)

増えたもの
- @eslint/js
- @types/eslint__js
- globals
- typescript-eslint
減ったもの
- @typescript-eslint/eslint-plugin
- @typescript-eslint/parser

減った2つは typescript-eslint の依存関係になっているので、実質的には4つ増加。

Hideki Ikemoto

TODO

parserOptionsの説明更新
型で補完したい