feat: Next.js 向けの eslint v8 と prettier の基本設定例

[strozw]

Next.js (v14) で ESLint (v8 & Legacy Config) と Prettier を利用する際の基本的な設定を追加しました。
※ Next.js v1 では、 ESLint v9 と Flat Config に対応していないため

pnpm create next で生成される .eslintrc.json と異なる点

• ESLint の eslint:recommended Shared Config を適用
• TypeScript ESLint を追加し、plugin:@typescript-eslint/recommended-requiring-type-checking Shared Config を適用
• tailwindcss を利用するであろう想定をし、eslint-plugin-tailwindcss を追加
• eslint-config-prettier を追加し、 prettier Shared Config を適用
• eslint-plugin-import の import/order よりも、より広範囲かつ望ましい形でソートが可能な eslint-plugin-simple-import-sort を利用したimport と export の順序指定
• @typescript-eslint/consistent-type-imports ルールを指定し、import と import type を分割
• import/consistent-type-specifier-style ルールを指定し、同一パスの import type と import の順序を指定

.prettirerc の設定内容

• .editorconfig と併用する事を前提とし、デフォルトの設定を利用する簡素なスタイル

[hayato-osh]

気になったので見てたらいくつか直せそうなところがあったのでレビューさせていただきました！

[totto2727]

自分ならこうするかなというのを貼っておきます

warnにしているのはよほど致命的なもの以外はerrorにしたくないという個人的な趣味です

type importを一意に確定させる設定
tsconfigのverbatimModuleSyntaxと合わせるとほぼ一意に確定できるはず

  "@typescript-eslint/consistent-type-imports": [
    "warn",
    {
      fixStyle: "separate-type-imports",
      prefer: "type-imports",
    },
  ],
 'import/consistent-type-specifier-style': ['warn', 'prefer-top-level'],

インポートのソートであれこれ悩みたくなかったので、以下に全て丸投げしていました

https://github.com/lydell/eslint-plugin-simple-import-sort

    {
      files: ["*"],
      plugins: ["simple-import-sort"],
      rules: {
        "simple-import-sort/imports": "warn",
        "simple-import-sort/exports": "warn",
      },
    }

[strozw]

@totto2727

type importを一意に確定させる設定 tsconfigのverbatimModuleSyntaxと合わせるとほぼ一意に確定できるはず

  "@typescript-eslint/consistent-type-imports": [
    "warn",
    {
      fixStyle: "separate-type-imports",
      prefer: "type-imports",
    },
  ],
 'import/consistent-type-specifier-style': ['warn', 'prefer-top-level'],

上記、ちょっと気になるので、後ほど調べて導入検討します。
ありがとうございます 🙏🏼

インポートのソートであれこれ悩みたくなかったので、以下に全て丸投げしていました

https://github.com/lydell/eslint-plugin-simple-import-sort

    {
      files: ["*"],
      plugins: ["simple-import-sort"],
      rules: {
        "simple-import-sort/imports": "warn",
        "simple-import-sort/exports": "warn",
      },
    }

こちら、ありな感じはするのですが、一旦 eslint-config-next が eslint-plugin-import を採用しているという事もあるので、eslint-plugin-import のまま進めます 🙏🏼

ほかの、react 向けで、 ESLint v9 対応の際には、上記 plugin 検討しようと思います。

[strozw]

@totto2727 @ygkn

eslint-plugin-simple-import-sort の内容を再確認し、import/order と sort-imports よりも、export も含め望ましい形になることがわかったため、eslint-plugin-simple-import-sort を中心にした設定に変更しました。

#10 (comment)

また、併せて推奨されていた import typ と import を分割するルールについても、モジュールがタイプか実態のあるものかを判別しやすくなることと、トランスパイル時にパーサーのパフォーマンスに良い影響が期待できることから指定するようにしました。
※ warn か error については、 verbatimModuleSyntax が指定された場合、TSC にエラーになるため、その点も考慮し error を指定するようにしました。