Eslint v9 への書き換え

yosi2025/02/08 14:03

以下はEslint8の設定です。Eslint9で使えるように変更してください。拡張子はjsとして記述するとします。

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  files: ["**/*.ts", "**/*.tsx"],
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react-hooks/recommended",
  ],
  ignorePatterns: ["dist", ".eslintrc.cjs"],
  parser: "@typescript-eslint/parser",
  plugins: ["react-refresh"],
  rules: {
    "react-refresh/only-export-components": [
      "warn",
      { allowConstantExport: true },
    ],
  },
}

Answerer AIPowered by gpt-4o-mini

Eslint9に対応するためには、いくつかの変更が必要です。具体的には、filesのセクションを削除し、overridesを使用して.jsファイルに対する設定を追加する必要があります。また、もしTypeScript関連の設定を削除し、JavaScriptに特化させるのであれば、同様にTypeScript関連のプラグインやパーサーも削除する必要があります。以下は変更後の設定例です。

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    "eslint:recommended",
    "plugin:react-hooks/recommended",
  ],
  ignorePatterns: ["dist", ".eslintrc.cjs"],
  // TypeScript関連を削除
  // parser: "@typescript-eslint/parser",
  // plugins: ["react-refresh"],
  rules: {
    "react-refresh/only-export-components": [
      "warn",
      { allowConstantExport: true },
    ],
  },
  overrides: [
    {
      files: ["**/*.js"],
      // ここにJavaScript専用の設定があれば追加
    },
  ],
}

もしJavaScriptファイルに特有のルールや設定があれば、overridesセクション内に追加してください。また、react-refreshプラグインを使う場合は、プラグインの設定も必要ですので、適宜追加してください。

yosi2025/02/08 14:04

envは削除されました。

Answerer AIPowered by gpt-4o-mini

おっしゃる通り、Eslint 9ではenvの設定は削除されました。以下は、envを削除し、その他の設定も反映した修正後の設定例です。

module.exports = {
  root: true,
  extends: [
    "eslint:recommended",
    "plugin:react-hooks/recommended",
  ],
  ignorePatterns: ["dist", ".eslintrc.cjs"],
  overrides: [
    {
      files: ["**/*.js"],
    },
  ],
  rules: {
    "react-refresh/only-export-components": [
      "warn",
      { allowConstantExport: true },
    ],
  },
}

この設定では、JavaScriptファイルに対してESLintが適用されるようにしており、envに関する項目は削除されています。他のプラグインやルールについては、必要に応じて追加または調整してください。

yosi2025/02/08 14:04

全く参考にならなかった

yosi2025/02/08 14:05

https://tech.makeshop.co.jp/entry/2024/07/09/154201

yosi2025/02/09 0:27

最終的に以下のようになった

eslint.config.js

import globals from "globals"
import pluginJs from "@eslint/js"
import tseslint from "typescript-eslint"
import pluginReact from "eslint-plugin-react"

/** @type {import('eslint').Linter.Config[]} */
export default [
  { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
  { ignores: ["dist/**/*", "docs/.vitepress/**/*", "eslint.config.js"] },
  { languageOptions: { globals: globals.browser } },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  pluginReact.configs.flat.recommended,
  {
    rules: {
      "react/react-in-jsx-scope": "off",
      "react/jsx-uses-react": "off",
    },
  },
]

コメントするにはログインが必要です

yosi