【React × Typescript × Tailwind × Prettier × ESlint 】eslint.config.jsの設定でつまづいたポイント

少し前にReact × Typescript × Tailwindでのコード整形と構文チェックをちょっと苦戦しながら実装しました。

今度は別のプロジェクトでNext.jsで同じく開発環境をつくっていたら、またまた苦戦しました。

eslint.config.jsでエラー無視する設定にしてるのにバンバンエラー出てくるとか…。あれ……？これ前も同じような現象で躓いたな。。

ということで、主にeslint.config.jsの書き方でハマったポイントを書いておきます。

exportの方法

色んな記事を見させてもらってたんですが、flat configの書き方で、

export default [
  // ここに設定
];

import tseslint from 'typescript-eslint'
export default tseslint.config({
  // ここに設定
});

この2種類が出てくるんですよね。

この違いは何なんだというのを書いてる記事がなかなか見つけられなかったんですが、export default []こっちの配列で書く方がノーマルです。

tseslint.configの方は公式が提供しているユーティリティ関数を使った設定方法のようです。

配列で書く場合のハマりポイント

export default []こっちの配列の書き方を使用する場合、ignores（ESlintの設定を除外するファイルやディレクトリの指定）を最初に単体で書くのがポイントです。

import eslint from '@eslint/js'
import tseslint from 'typescript-eslint'
import globals from 'globals'

export default [
  {
    // ignoresプロパティだけを先に書く
    ignores: ['dist'],
  },
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  {
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
// ...省略

languageOptionsとかと同列にignoresを書いていて、設定が全く効かない沼に数時間ハマりました。

tseslint.configを使う場合のハマりポイント

import tseslint from 'typescript-eslint'
export default tseslint.config({
  // ここに設定
});

こっちの書き方を使う場合は、モジュール（ESM）として扱わないといけないので、eslint.config.jsではなくeslint.config.mjsというファイル名にするか、

eslint.config.jsのまま使うならpackage.jsonに"type": "module"を追加する必要があります。

{
  "name": "my_app_name",
  "version": "0.1.0",
  "private": true,
  "type": "module",