ESLint를 활용한 Next.js + TypeScript 프로젝트 코드 품질 관리 설정 가이드
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
Next.js + TypeScript 프로젝트 개발자 (중급 이상, ESLint 구성 및 코드 리뷰 경험자)
핵심 요약
- ESLint는 코드 일관성, 오류 탐지, 최적화를 위한 정적 분석 도구로,
@eslint/js
,typescript-eslint
등의 플러그인을 활용 - Next.js 내장 규칙(
next/core-web-vitals
,next/typescript
)과 커스텀 규칙(no-unused-vars
,quotes
)을 통합 적용 - 패키지 설치 명령어:
pnpm add --save-dev eslint @eslint/js typescript typescript-eslint @next/eslint-plugin-next
섹션별 세부 요약
1. 프로젝트 생성 및 ESLint 설치
npx create-next-app@latest
명령어로 Next.js 프로젝트 생성pnpm add --save-dev eslint @eslint/js typescript typescript-eslint @next/eslint-plugin-next
로 ESLint 및 관련 패키지 설치package.json
의devDependencies
에 ESLint 및 TypeScript 관련 패키지 포함
2. ESLint 구성 파일 생성
eslint.config.mjs
파일 생성 후FlatCompat
을 이용한 구성 파일 경로 설정__dirname
생성:import.meta.url
을 기반으로 절대 경로 변환FlatCompat
인스턴스 생성:baseDirectory: __dirname
설정
3. ESLint 규칙 및 플러그인 구성
- Next.js 내장 규칙 적용:
compat.extends("next/core-web-vitals", "next/typescript")
- 전역 무시 파일 설정:
.next/
,node_modules
,public/
등 - 언어 옵션 정의:
globals
에browser
및node
환경 포함 - 플러그인 등록:
js
,@next/next
,@typescript-eslint
,tailwindcss
등
4. ESLint 규칙 세부 설정
- 코드 스타일 규칙 예시:
- quotes
: "double" 사용 권장
- semi
: 항상 세미콜론 강제
- no-unused-vars
: 경고 수준으로 설정
- TypeScript 관련 규칙:
@typescript-eslint/no-unused-vars
경고 활성화 - Tailwind CSS 규칙:
tailwind.configs["flat/recommended"]
적용
결론
- ESLint를 통해 Next.js + TypeScript 프로젝트의 코드 일관성과 오류 예방을 실현 가능
@next/eslint-plugin-next
플러그인과typescript-eslint
를 통합하여 최적의 규칙 집합 구성quotes
,semi
,no-unused-vars
등 핵심 규칙은 프로젝트 품질 관리의 핵심 요소로 적용 권장