Next.jsのformatter周りを整備してみる

社内の別プロダクトでは開発当初にはbiome使っていたようでしたがメンバーの方にお話を聞いてみると、なにやら色々とツラミがあったようなので「定番のeslintに戻したよ」と伺いました。

今まで自身はsandbox的に色々触って試していたときに何も設定せず、コードがごちゃつきがちだったので自身でプロジェクト作って行く際の最初の準備としてのものを
GPT君と一緒に考えてみるかということで主にformat関連の設定を（補完もちょっとだけ）やってみました。

DK

package.json

Next.jsのほぼ初期状態です（以下は入ってます）

公式のversion情報によると

Versions
Version 4.x.x is for eslint 9 with @typescript-eslint/eslint-plugin 8
Version 3.x.x is for eslint 8 with @typescript-eslint/eslint-plugin 6 - 7
Version 2.x.x is for eslint 8 with @typescript-eslint/eslint-plugin 5
Version 1.x.x is for eslint 6 and 7.

とのことだそうです

DK

.eslintrc.json

内容はいたってよくある機能

使ってないimport削除
import並べ替え（グループ毎、アルファベット順）
自動import（これはsettings.jsonの方）
tailwindのclass名の並び順フォーマット
tailwindのclassクイック補完（VScodeのpluginとsettings.json ）

DK

.vscode/settings.json

各機能の内容はgistのコメント欄に記載しております。

DK

一応、やりたいこと（主にformat）はできたので良しとするので終了！！
GPT君、ホント優秀だ🤘

DK

tailwindはextendした元々存在するクラスについての補完はVScodeでも効くのに@applyで設定した自身のクラスはVScodeでは補完が効かないのが少し悔しかったです。

まぁ、あまり使うなということで推奨はされていないので最低限の利用にとどめ
Componentそのものの方に寄せる形に作っていこうかなと思います。

DK

Next.js のプロジェクトを開発しやすいようにするlintとformatterなどの設定

スーパー上位互換の素晴らしい記事が！！👀
ただ自分で調べつつやった分、理解深まったしこのスクラップは自分の為に良かったと思おうw