[Next.js] 프로젝트만들고 ESLint, Prettier 설치하기

📍목표

- PNPM 패키지 매니저 사용해서 Next.js 프로젝트 만들기
- Tailwind 사용 조건으로 ESLint, Prettier 빠르게 설치하기

📍create-next-app

- create-next-app으로 최신 Next.js 프로젝트 생성
- pnpm 사용

 

npx create-next-app@latest [project-name] --use-pnpm

 

이후 터미널에서 이어지는 질문에서 ESLint 사용을 체크했다면 ESLint를 설치할 필요 없다

 

📍Prettier 설치

- Prettier 및 Prettier와 ESLint와의 충돌을방지하는 플러그인과 익스텐션 설치
- Prettier Tailwind 플러그인도 설치
- ESLint Tailwind 플러그인도 설치

 

pnpm install -D prettier eslint-config-prettier eslint-plugin-prettier prettier-plugin-tailwindcss eslint-plugin-tailwindcss

 

 

📍ESLint config 파일에 플러그인 및 익스텐션 추가

- Prettier(Tailwind Prettier 포함) 와 ESLint의 충돌을 방지하는 플러그인을 추가한다

.eslintrc.json (자동으로 생성된 파일)

 

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

 

📍Prettier config 파일 추가

- Tailwind class 간 순서를 자동으로 포매팅해주는 Prettier 플러그인도 추가한다

.prettierrc 파일 생성

 

{
  "tabWidth": 2,
  "semi": true,
  "singleQuote": false,
  "trailingComma": "all",
  "printWidth": 90,
  "useTabs": false,
  "endOfLine":"auto",
  "plugins": ["prettier-plugin-tailwindcss"]
}

 

📍IDE에서 ESLint, Prettier 설정 확인

- Webstorm: 내부 설정에서 검색
- VSCode: 익스텐션 설치

📍추가로 고려할 만한 것

- Webstorm(및 모든 Jetbrain 계열 IDE 사용시) .gitignore에 .idea 추가
- husky 및 lint-staged 설치