Next.jsにESLintとPrettierを併用して静的解析と自動フォーマットを行う | ZUMA LabNext.js と TypeScript のプロジェクトに ESLint と Prettier を併用して静的解析と VSCode の保存時に自動フォーマットを実行します。 Prettier (プリティア) とはコードフォーマッターで、ソースコードを整形してくれます。 デフォルトで HTML/JavaScript/CSS/JSON/YAML の他、 JSX、TypeScript や Markdown、GraphQL、styled-components など様々な形式に対応しています。 ESLint 単体コードフォーマットが可能なのですが、Prettier では ESLint では整形出来ないコードも整形してくれます。 今回、 Prettier はコードフォーマット、ESLint は構文チェックツールとして併用します。 環境macOS Big Sur 11.6Next 12.0.3React
