これはなに？

Next.js x TypeScriptを業務でも副業でもよく使用していて、最初のlint, prettierやらの環境構築が面倒なのでテンプレートを作成したという話です。

同じように最初の設定が面倒だという方の助けになれば嬉しいです。

作ったもの

Githubのテンプレート機能として公開しました。

このテンプレートの中には保守性を高めるというテーマで自分がよく設定するものを入れています。

それぞれの利用目的や設定についてを下に書いていきます。

package.jsonを読み取ってインストールしているパッケージに更新がないかを確認し、更新があれば自動でPull Requestを作ってくれるツールです。

パッケージのアップデートはいちいち追えないうえ、自動でPull Requestまで作ってくれるので迷わず導入しています。

テンプレートを使用する際は自分でアクセストークンやアプリの登録をする必要があるので注意してください。

↓公式ドキュメント

renovateに関する設定は/renovate.jsonに記載していて、具体的には以下を設定しています

名称	機能	テンプレートの設定
baseBranchs	マージ先になるブランチ	main
schedule	アップデート確認&PR作成を行うタイミング	every weekend
rangeStrategy	既存の範囲を更新する際のルール	pin
prConcurrentLimit	一度のアップデート確認で作成するPRの数	5
packageRules	1PRに含めるパッケージのグルーピング	Next.js, Linter, React, TypeScript

Huskyはコミットやプッシュの際にテストやlintを実行してくれるツールです。

個人開発の際は使わないのですが、複数人での開発やプロジェクトの場合はコードの品質が人に依存してしまうのでそれを防ぐために利用しています。

このテンプレートではコミット時にlintとprettierが走るようになっていて、lintでエラーや警告が1つでもある場合はコミットできないようになっています。

セットアップに関してはこちらの記事を参考にしてみてください。

説明不要の静的解析ツールです。

構文エラーやコーディング規約を設定できるので利用しています。

このテンプレートでは以下の設定をしています。

importおよびexportステートメントの構文をチェックしています。

このテンプレートではimportの順番を細かく設定しています。

順番はざっくりと以下のように設定しています。

ルール1

ESLintの設定をPrettierのフォーマット設定に合わせるために使用しています。

Next.jsに特化したに特化したESLintの設定を提供するパッケージです。

これもまた説明不要のコードフォーマッターです。

複数人での開発の際に、チームの中でのコードのスタイルの統一性を高め、コードをより一貫性のある読みやすいものにするために利用しています。

「こんなものもデフォルトで入れてあると便利かも！」とかあると自分も学びになるのでコメント等していただけると嬉しいです！

ではまた！