AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

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.jsondevDependencies에 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/
  • 언어 옵션 정의: globalsbrowsernode 환경 포함
  • 플러그인 등록: 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핵심 규칙은 프로젝트 품질 관리의 핵심 요소로 적용 권장