ESLintを設定するときに 超絶 役立った記事【2023年11月】
ReactとNext.jsのプロジェクトを初期設定して、個人開発を続けてたんだけど、GithubでPull Request作っても誰もレビューしてくれないから、Linterを設定して自動でレビューしてもらうことにした。
まずは、Linterである ESLint とコードスタイルを整備する Prettier を設定するぞ！と始めた。
前提：プロジェクト構成
- react
^18 - next
14.0.0
Next.js で Server Component を使って、 Prisma も使う感じ。
そして TypeScript で実装している。
Next.js をセットアップした時点で、 .eslintrc.json が作成されていた。
ESLintをセットアップするときに削除した！（後述）
{ "extends": "next/core-web-vitals" }
1. ESLint を設定する
まずは ESLint の公式ガイドをみて導入した。
Getting Started with ESLint - ESLint - Pluggable JavaScript Linter
npm init @eslint/config
.eslintrc.js が作成された（あとで拡張子を .cjs にしたぞ）
いろいろエラーが発生したので、こちらの記事を読みながらESLintの設定を作ったぞ！
extends とか plugin 、 parser のあたりがまったく分かってなかったので、↑の記事にかなり助けられた。
TypeScriptを使う関係で、パーサー周りのエラーが起きていた。
しかし、手元のコミットログを見直すと拡張子を .cjs にするだけでエラー消えてたわ……
あと、 冒頭で書いた .eslintrc.json は .eslintrc.js (cjs) と一緒に存在するとエラーになるみたいだったから、 .js (.cjs) に設定を移動させた。
- extends: ["standard-with-typescript", "plugin:react/recommended"], + extends: [ + "standard-with-typescript", + "plugin:react/recommended", + "next/core-web-vitals", + ],
2. Prettier を設定する
コードフォーマッターとして Prettier を入れるぞ
Prettier · Opinionated Code Formatter
前からよく言われる問題だけど、ESLintとPrettierを併用するとチェックルールが競合して、面倒なので、ルールを良い感じに設定してくれるルールセットを追加する。
ここですごく分かりやすかったのはこの記事でした！
いろいろ歴史的経緯があって、設定の仕方が違う記事とかあるけど、現時点ではこの記事にあるように eslint-config-prettier を使うだけで良さそう。
インストールして……
npm install --save-dev eslint-config-prettier
extends の最後に prettier を追加するだけだった。
{ "extends": [ "some-other-config-you-use", "prettier" ] }
おわり
すーーぐ忘れるので記事に残しておいたぞー
