Closed2023/10/03にクローズ3

ESLint設定の振り返りとまとめ[Next.js+TypeScript]

概要

Next.js + TypeScript + ESLintといったごく当たり前の構成で開発をおこなっているが、TypeScriptを正しく扱うために落としてはいけない設定、逆に落としてもいい設定のケースと根拠、そういったものをより安全な開発の為にまとめていきたい。

とりあえず何でもかんでも入れるのは辞めたい。

こちらを参考にして精査する。

参考2

既に使用している場合基本的にはNext.js標準設定を上書きすれば良い模様。
公式ページ

Create Next Appすると入ってくる。
新規作成する際どちらか聞かれるので、下記で紹介するどちらか片方が入ってれば良い。
これをベース(configの一番上に書いた状態)にカスタマイズしていくのが良い？内容次第なので要確認

Next.jsの基本的な設定が組み込まれている。
公式ページ

前述のnext+Core Web Vitals ルールを適用したもの。
UX向上のアドバイスもしてくれるのかな。
公式ページ

コスト掛けて併用目指すくらいならどれかに寄せたいなと思い筆者はprettierを選択。
configの一番下に書いた。

昔の記事読んでたり、以前自分が書いてたプロジェクトには含まれていたもの。
型チェックしてくれたりとTypeScript書く上で欠かせない気がする。

あれ？これと

これマストじゃない？
型の安全性を高める為に必要。
async/awaitでエラーにしてくれる（型が違うので）

TypeScriptの設定。tsconfig

true.

このスクラップは2023/10/03にクローズされました