• https://eslint.org/
• https://prettier.io/
• https://nextjs.org/docs/app/api-reference/config/eslint
• https://github.com/francoismassart/eslint-plugin-tailwindcss

프로젝트에서 코드 품질과 일관성을 유지하기 위해 다양한 도구를 찾아보던 중, ESLint와 Prettier를 활용하면 효과적으로 코드 스타일을 관리할 수 있다는 점을 알게 되었습니다.

이 글에서는 Next.js + TypeScript 환경에서 ESLint와 Prettier를 적용하는 방법을 정리합니다.

패키지 설치

먼저, ESLint의 기본 라이브러리를 설치한 후, TypeScript, Next.js, React 환경에 맞는 규칙을 추가합니다.

npm install -D eslint eslint-config-next

📌 참고: Next.js ESLint 공식 문서

Prettier와 통합을 위한 패키지 추가

ESLint와 Prettier를 함께 사용할 경우, 스타일 관련 규칙 충돌을 방지하기 위해 아래 패키지를 추가로 설치해야 합니다.

npm install -D eslint-config-prettier eslint-plugin-prettier

Prettier 설정 방법은 아래에서 자세히 다룹니다.

Tailwind CSS와 ESLint 연동 (선택)