Next.js + TypeScript用ESLintルールを整理する

最終的に以下GitHubにまとめていく。

• https://github.com/Shimpei-GANGAN/eslint-config-next-typescript

対応イシューはこちら。

• https://github.com/Shimpei-GANGAN/eslint-config-next-typescript/issues/1

せっかくなら綺麗にしたいと常々思っている。

ref:

• https://zenn.dev/kimromi/articles/b7cf98005f3193

Next.js 情報整理

Next.js公式ドキュメント

• https://nextjs.org/docs/basic-features/eslint

Next.jsのGitHub

• eslint-confit-next

eslint-config-next・eslint-plugin-next

公式ドキュメントを確認する限り、以下のルールが選択可能である。

• next
• next/core-web-vitals

eslint-config-eslintでは以下3つのルールがextendsされている。

• eslint-plugin-react
• eslint-plugin-react-hooks
• eslint-plugin-next

eslint-config-nextで設定できるルールはどちらもeslint-plugin-next内で確認できる(リンク先はGitHub)

• eslint-plugin-next: https://github.com/vercel/next.js/blob/canary/packages/eslint-plugin-next/src/index.ts#L27-L51
• eslint-plugin-next/core-web-vitals: https://github.com/vercel/next.js/blob/canary/packages/eslint-plugin-next/src/index.ts#L52-L60

ゴール

以下を達成したらクローズする

• Next.js + TypeScriptのルール設定

以下はスクラップブックを分けてもいいと思ってる。ここらへんは追々決める。

• Next.js + TS + Storybookのルール設定
• Next.js + TS + SB + MUIのルール設定

TypeScript 情報整理

• こっちでまとめているのでリンクのみ掲載
  • https://zenn.dev/link/comments/3e774a95a8123a

Draft: MUI 情報整理

Storybook 情報整理

Document

• GitHub: https://github.com/storybookjs/eslint-plugin-storybook

Usage

// .eslintrc.js
module.exports = {
  extends: [
    ...,
    'plugin:storybook/recommended',
    ...,
  ],
}