NextJS - Prettier, ESLint 및 prettier-plugin-tailwindcss 설정하기

NextJS - Prettier, ESLint 및 prettier-plugin-tailwindcss 설정하기

 

작성 일자 : 2024년 10월 06일

---

 

 

image illustrated by Flux Lora

 

Prettier, ESLint

 

NextJS 프로젝트에서 Prettier와 ESLint를 설정하는 방법에 대해 알아보겠습니다.

 

---

 

NPM 패키지 설치

npm i -D prettier
npm i -D eslint eslint-config-prettier eslint-plugin-prettier
npm i -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

 

---

 

Prettier 설정

 

.prettierrc 파일 생성

touch .prettierrc

 

---

 

.prettierrc 작성

{
  "printWidth": 80,
  "semi": true,
  "singleQuote": false,
  "trailingComma": "all",
  "tabWidth": 2,
  "bracketSpacing": true,
  "endOfLine": "auto",
  "useTabs": false,
  "arrowParens": "avoid"
}

 

---

 

 

prettier-plugin-tailwindcss

 

Tailwind CSS 클래스를 자동으로 정렬해주는 prettier-plugin-tailwindcss를 설치합니다.

 

---

 

NPM 패키지 설치

npm i -D prettier-plugin-tailwindcss

 

---

 

.prettierrc 파일 수정

{
  ...
  "plugins": ["prettier-plugin-tailwindcss"] // 하단에 추가
}