4. ESLint, Prettier

이 문서는 ESLint와 Prettier를 설정하여 JavaScript 또는 TypeScript 기반의 프로젝트에서 코드 품질을 향상시키는 방법에 대한 안내입니다. 먼저 ESLint와 Prettier를 설치하고 기본적인 설정을 추가하는 방법을 설명합니다. 이후 Tailwind CSS와의 충돌을 방지하기 위한 설정 및 예외 처리도 다룹니다.

1

설치 — ESLint 기본 설치

pnpm 패키지 매니저를 사용하여 eslint와 eslint-config-next를 설치합니다.

Install packages

$ pnpm add eslint eslint-config-next

package.json에 lint 스크립트를 추가합니다.

package.json (scripts)

"scripts": {
  ...
  "lint": "next lint --no-cache"
}

참고:

--no-cache는 생략 가능하며, 붙일 경우 변경사항과 상관없이 전체 파일을 다시 검사합니다.

2

Standard package 설치

pnpm으로 eslint-config-standard를 설치합니다.

Install standard config

$ pnpm add eslint-config-standard

프로젝트 루트에 .eslintrc.json 파일을 생성하고 아래를 작성합니다.

.eslintrc.json

{
  "extends": ["next/core-web-vitals", "standard"]
}

이 설정으로 ESLint가 프로젝트 코드를 분석하고 표준 규칙을 적용합니다.

3

ESLint config — Tailwind CSS 검사 추가

pnpm으로 eslint-plugin-tailwindcss를 설치합니다.

Install Tailwind ESLint plugin

$ pnpm add eslint-plugin-tailwindcss

eslint-plugin-tailwindcss는 Tailwind 유틸리티 클래스의 유효성(올바른 클래스 사용 여부)과 충돌하는 속성(예: className="flex grid")을 검사해줍니다.

.eslintrc.json에 plugin:tailwindcss/recommended를 추가합니다:

.eslintrc.json (with tailwind plugin)

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

4

Prettier 설정 및 Tailwind 정렬 플러그인

pnpm으로 prettier 관련 패키지를 설치합니다.

Install Prettier and plugins

$ pnpm add prettier eslint-config-prettier prettier-plugin-tailwindcss

eslint-config-prettier는 ESLint와 Prettier 간 중복 규칙을 비활성화하여 충돌을 방지합니다.

.eslintrc.json에 prettier와 예외 규칙을 추가합니다:

.eslintrc.json (with prettier & rules)

{
  "extends": [
    "next/core-web-vitals",
    "standard",
    "plugin:tailwindcss/recommended",
    "prettier"
  ],
  "rules": {
    "no-undef": "off",
    "spaced-comment": "off",
    "tailwindcss/classnames-order": "off"
  }
}

rules 설명:

• no-undef: React 17+에서 import React from 'react' 생략 시 발생할 수 있는 경고 예외 처리

• spaced-comment: 주석 관련 lint 경고 예외 처리

• tailwindcss/classnames-order: 커스텀 className과 Tailwind 공식 순서 규칙 충돌로 인한 예외 처리

추가로 Prettier 설정 파일(.prettierrc)을 생성합니다:

{
  "printWidth": 80,
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "useTabs": false,
  "endOfLine": "auto",
  "trailingComma": "es5",
  "arrowParens": "always",
  "bracketSpacing": true,
  "htmlWhitespaceSensitivity": "css",
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "tsxSingleQuote": false,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "vueIndentScriptAndStyle": true,
  "requirePragma": false,
  "plugins": ["prettier-plugin-tailwindcss"]
}

5

VS Code 확장 (권장)

다음 확장을 설치하면 편리합니다:

• ESLint

• Prettier - Code formatter

• Prettier ESLint

6

ESLint 검사 실행

프로젝트 루트에서 lint를 실행합니다:

$ npm run lint

위 명령은 프로젝트의 모든 파일을 ESLint 규칙에 따라 검사합니다.

</div>

</div>

추가 참고사항:
- Tailwind 관련 lint 규칙과 Prettier의 tailwind 정렬 플러그인을 함께 사용하면 클래스 순서와 형식 관련 일관성을 유지할 수 있습니다. 필요에 따라 .eslintrc.json의 규칙을 조정해 예외를 처리하세요.

문서 작성 시점의 메타정보(Confluence 생성/수정 시각 등)는 본 페이지에서 제거되었습니다.