本書では Next.js において ESLint の利用方法について学びます。

【読者】
・Next.js で開発するために必要な ESLint の知識
・Next.js で開発するために必要な ESLint の設定

【特徴は】
・ステップバイステップで構築方法を学べる
・ソースコードを参考にしながら学習

【本書籍がカバーする技術】
・React
・Next.js
・ESLint 🚀
・Vercel
・Prettier
・husky
・lint-staged
・TypeScript
・GitHub Actions

【その他】
「いいね」してくれたらモチベーションあがります🚀 

Next.js 実践入門 - ESLint 編

🏝️　はじめに

0.1　更新履歴

🏖️　第1部　ESLintの基礎知識

1.1　📚 ESLint の概要

1.2　📚 ESLintが解決する問題と実装例

1.3　📚 ESLintの歴史

1.4　📚 ESLintのエコシステム

1.5　📚 ESLint のセットアップ

1.6　📚 ESLint の設定ファイル

1.6.1 📚 従来の設定形式（v8以前）

1.6.2 📚 フラット設定形式（v9以降）

⛱️　📚 第2部　Next.jsプロジェクトでESLintを導入する

2.1　💻 Next.js プロジェクトを新規作成

2.2　💻 Next.js プロジェクトを初期化

2.3　📚 ESLint の設定ファイルを確認

2.4　💻 ESLint の簡易動作確認

2.5　💻 ESLint 対象外ファイルを指定

2.6　💻 ESLint のスクリプトを追加

2.7　📚 Next.js 固有の ESLint の設定

2.8　💻 Prettier の設定

2.9　💻 Gitフックの導入

2.10　💻 GitHub Actions を導入

🌊　📚 第3部　VS Code で開発環境整備

3.1　💻 VS Code 拡張機能を設定

3.2　💻 VS Code を設定

3.3　💻 VS Code 拡張機能のトラブルシューティング

⛵　第4部　簡易版の ESLint 設定ファイルを作成

4.1　📚 簡易版の ESLint の設定ファイル

4.2　📚 next/core-web-vitals

4.2.1 📚 require.resolve('.')

4.2.2 📚🌶️ plugin:@next/next/core-web-vitals

4.3　📚 next/typescript

4.4　📚 typescript-eslint

4.4.1　💻 config の適用

4.4.2　💻 recommended-type-checked の追加

4.4.3　💻 stylistic-type-checked の追加

4.4.4　💻 array-type の追加

4.4.5　💻 consistent-type-definitions の追加

4.4.6　💻 require-await の追加

4.4.7　💻 consistent-type-imports の追加

4.4.8　💻 no-unused-vars の追加

4.4.9　💻 no-misused-promises の追加

4.5　💻 unicorn/filename-case

4.6　💻 eslint-config-prettier

🤿　第5部　ESLintの厳密板ルールセットを作成

5.1　📚 厳密版の ESLint の設定ファイル

5.2　📚 unicorn について

5.3　💻 unicorn を導入

5.4　📚 perfectionist について

5.5　💻 perfectionist を導入

5.6　📚 unused-imports について

5.7　💻 unused-imports を導入

5.8　📚 security について

5.9　💻 security を導入

5.10　📚 prefer-template について

5.11　💻 prefer-template を導入

5.12　📚 consistent-type-definitions について

5.13　💻 consistent-type-definitions を導入

5.14　📚 func-style について

5.15　💻 func-style を導入

5.16　📚 prefer-arrow-callback について

5.17　💻 prefer-arrow-callback を導入

🌊　第6部　まとめ

読者コミュニティ｜Next.js 実践入門 - ESLint 編

nextjs

react

vercel

eslint

hayato94087