AstroプロジェクトへのESLint Flat Config導入例 (TypeScript, import, jsx-a11y)

Posted at 2024-12-10

AstroのプロジェクトにESLintのFlat Configを導入する例です。サードパーティライブラリのeslint-plugin-astroを使用します。

eslint-plugin-astro
https://ota-meshi.github.io/eslint-plugin-astro/

ライブラリ

- "@eslint/js": "^9.16.0"
- "@typescript-eslint/parser": "^8.17.0"
- "astro-eslint-parser": "^1.1.0"
- "eslint": "^9.16.0"
- "eslint-plugin-astro": "^1.3.1"
- "globals": "^15.13.0"
- "typescript-eslint": "^8.17.0"

# optional
- "eslint-config-prettier": "^9.1.0"
- "eslint-import-resolver-typescript": "^3.7.0"
- "eslint-plugin-import": "^2.31.0"
- "eslint-plugin-jsx-a11y": "^6.10.2"

この例ではeslint-config-airbnb-baseおよびeslint-config-airbnb-typescriptからの移行を念頭に置いているため、eslint-plugin-importとeslint-plugin-jsx-a11yを導入していますが、これらの設定はお好みに合わせて任意で設定してください。

設定ファイル (`eslint.config.mjs`)

ESLint設定ファイルは2024年12月現在、js cjs mjs がデフォルトでサポートされています。TypeScriptでの記述(ts mts cts)は追加設定を行えば可能ですが、使用するライブラリが型定義ファイルを持っているとは限らないので、現状mjsが無難な選択だと思われます。

eslint.config.mjs

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import importPlugin from "eslint-plugin-import";
import jsxA11yPlugin from "eslint-plugin-jsx-a11y";
import eslintPluginAstro from "eslint-plugin-astro";
import astroParser from "astro-eslint-parser";
import typescriptEslintParser from "@typescript-eslint/parser";
import eslintConfigPrettier from "eslint-config-prettier";

/** @type {import("eslint").Linter.Config[]} */
export default [
  pluginJs.configs.recommended,

  /* optional */
  importPlugin.flatConfigs.recommended,

  ...tseslint.configs.recommended,

  /* optional */
  {
    plugins: {
      "jsx-a11y": jsxA11yPlugin,
    },
  },
  ...eslintPluginAstro.configs["jsx-a11y-recommended"],
  /**
   * jsx-a11yを使わない場合は以下の設定でok
   * ...eslintPluginAstro.configs.recommended,
   */

  {
    languageOptions: {
      ecmaVersion: 2022,
      sourceType: "module",
      globals: { ...globals.browser, ...globals.node },
    },
  },

  /* optional */
  {
    settings: {
      "import/resolver": {
        typescript: {},
      },
    },
  },

  {
    files: ["*.astro"],
    languageOptions: {
      parser: astroParser,
      parserOptions: {
        parser: typescriptEslintParser,
        extraFileExtensions: [".astro"],
      },
    },
  },

  /* optional */
  eslintConfigPrettier,
];

Astro + TypeScript

基本的にeslint-plugin-astroのドキュメント通りに設定すればいいのですが、Astroファイル内のTypeScriptが解析されない事態が発生してしまいました。以下の記述を配列に加えることで、Astroファイル内のTSコードを読み込めるようになりました。

import astroParser from "astro-eslint-parser";
import typescriptEslintParser from "@typescript-eslint/parser";

export default [
  // ...,
  {
    files: ["*.astro"],
    languageOptions: {
      parser: astroParser,
      parserOptions: {
        parser: typescriptEslintParser,
        extraFileExtensions: [".astro"],
      },
    },
  },
  // ...,
]

jsx-a11y

eslint-plugin-astroは別途eslint-plugin-jsx-a11yをインストールすることで、Astroコンポーネントのアクセサビリティルール検出の設定を有効にすることができます。jsx-a11yプラグインを有効にし、通常のrecommendedに替えてjsx-a11y-recommendedを記述します。より厳格なルールを適用したい場合はjsx-a11y-strictが選択可能です。

import jsxA11yPlugin from "eslint-plugin-jsx-a11y";
import eslintPluginAstro from "eslint-plugin-astro";

export default [
  // ...
  {
    plugins: {
      "jsx-a11y": jsxA11y,
    },
  },
  ...eslintPluginAstro.configs["jsx-a11y-recommended"],
  // ...
]

その他

eslint-import-resolver-typescript

eslint-import-resolver-typescriptはTSConfigのpathsオプションをESLintで解析できるようにするライブラリです。下記の設定を書くことで有効になります。

export default [
  // ...,
  {
    settings: {
      "import/resolver": {
        typescript: {},
      },
    },
  },
  // ...,
];

eslint-config-prettier

eslint-config-prettierは最後に記述します。この設定ファイルは、Prettierと競合するESLintのルールをオフにするものであり、Prettierの設定に違反している箇所を検出するわけではありません。Prettierの設定に違反している箇所を検出する場合は別途eslint-plugin-prettierを使用します。

以上、AstroプロジェクトにESLintのFlat Configを導入する一例でした。

リンク

ESLint
https://eslint.org/