これはなに？
Next.js x TypeScriptを業務でも副業でもよく使用していて、最初のlint, prettierやらの環境構築が面倒なのでテンプレートを作成したという話です。
同じように最初の設定が面倒だという方の助けになれば嬉しいです。
作ったもの
Githubのテンプレート機能として公開しました。
どんなものか？
このテンプレートの中には保守性を高めるというテーマで自分がよく設定するものを入れています。
- Renovate
- Husky
- Eslint, Prettier
それぞれの利用目的や設定についてを下に書いていきます。
Renovate
package.jsonを読み取ってインストールしているパッケージに更新がないかを確認し、更新があれば自動でPull Requestを作ってくれるツールです。
パッケージのアップデートはいちいち追えないうえ、自動でPull Requestまで作ってくれるので迷わず導入しています。
テンプレートを使用する際は自分でアクセストークンやアプリの登録をする必要があるので注意してください。
↓公式ドキュメント
Running Renovate - Renovate Docs
renovateに関する設定は/renovate.jsonに記載していて、具体的には以下を設定しています
| 名称 | 機能 | テンプレートの設定 |
|---|---|---|
| baseBranchs | マージ先になるブランチ | main |
| schedule | アップデート確認&PR作成を行うタイミング | every weekend |
| rangeStrategy | 既存の範囲を更新する際のルール | pin |
| prConcurrentLimit | 一度のアップデート確認で作成するPRの数 | 5 |
| packageRules | 1PRに含めるパッケージのグルーピング | Next.js, Linter, React, TypeScript |
Husky
Huskyはコミットやプッシュの際にテストやlintを実行してくれるツールです。
https://typicode.github.io/husky/#/
個人開発の際は使わないのですが、複数人での開発やプロジェクトの場合はコードの品質が人に依存してしまうのでそれを防ぐために利用しています。
このテンプレートではコミット時にlintとprettierが走るようになっていて、lintでエラーや警告が1つでもある場合はコミットできないようになっています。
セットアップに関してはこちらの記事を参考にしてみてください。
https://qiita.com/mu-suke08/items/43a492fda5cd71a31506
Eslint, Prettier
Eslint
説明不要の静的解析ツールです。
構文エラーやコーディング規約を設定できるので利用しています。
このテンプレートでは以下の設定をしています。
■eslint-plugin-import
importおよびexportステートメントの構文をチェックしています。
このテンプレートではimportの順番を細かく設定しています。
順番はざっくりと以下のように設定しています。
ルール1
- オブジェクト（object）
- 型（type）
- インデックス（index）
- ビルドインモジュール（builtin）
- 外部モジュール（external）
- 内部モジュール（internal）
■eslint-config-prettier
ESLintの設定をPrettierのフォーマット設定に合わせるために使用しています。
■eslint-config-next
Next.jsに特化したに特化したESLintの設定を提供するパッケージです。
Prettier
これもまた説明不要のコードフォーマッターです。
複数人での開発の際に、チームの中でのコードのスタイルの統一性を高め、コードをより一貫性のある読みやすいものにするために利用しています。
最後に
「こんなものもデフォルトで入れてあると便利かも！」とかあると自分も学びになるのでコメント等していただけると嬉しいです！
ではまた！