Next.js 프로젝트에 eslint-config-prettier 설정 및 사용 방법

ESLint 및 Prettier 설치

프로젝트에 ESLint와 Prettier를 설치합니다.

 

pnpm add eslint prettier eslint-config-prettier eslint-plugin-prettier --save-dev

 

 

ESLint 초기화 및 설정

ESLint 설정 파일을 생성하고 필요한 설정을 추가합니다. Next.js는 기본적으로 ESLint를 지원하므로 설정 파일을 수정하여 Prettier와 통합합니다.

.eslintrc.json 파일 생성 및 설정

프로젝트 루트에 .eslintrc.json 파일을 생성하고 다음 내용을 추가합니다.

 

{
  "extends": [
    "next",
    "next/core-web-vitals",
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

 

 

Prettier 설정 파일 생성

Prettier 설정 파일을 생성하여 원하는 코드 스타일을 정의합니다.

.prettierrc 파일 생성 및 설정

프로젝트 루트에 .prettierrc 파일을 생성하고 다음 내용을 추가합니다.

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 80
}

 

 

ESLint 및 Prettier 명령어 추가

package.json 파일에 ESLint와 Prettier를 실행할 수 있는 스크립트를 추가합니다.

package.json 파일 수정

{
  "scripts": {
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "format": "prettier --write ."
  }
}

 

ESLint와 Prettier 실행

설정이 완료되면 다음 명령어를 사용하여 ESLint와 Prettier를 실행합니다.

# ESLint 실행
pnpm lint

# Prettier 실행
pnpm format