eslint-config-prettier랑 eslint-plugin-prettier로 ESLint와 Prettier를 통합해 자동 코드 정렬과

< 목차 >
1. 왜 eslint-config-prettier와 eslint-plugin-prettier를 사용할까?
2. 설치 및 설정 방법
3. .eslintrc.json 파일의 불필요한 항목 정리
4. 정리 완료한 .eslintrc.json 파일
 
 
ESLint를 사용하여 팀으로 코드 스타일과 규칙을 동일하게 하면 코드 스타일의 일관성이 지켜지고 협업을 원활하게 할 수 있다.
 
하지만 우리가 지정한 ESLint 패키지와 옵션 때문에 매우 번거롭고, 개발 속도가 늦어질 것을 우려해서 Prettier와 통합해 코드 자동 정렬과 포맷 충돌 방지를 하려고 한다.
 
코드를 저장할 때마다 코드 스타일이 Prettier 규칙에 따라 정렬되고, ESLint와 충돌하지 않도록 관리하면 더 편해지고 개발 속도 또한 더 빨라지지 않을까?
 
이 블로그 글로 인해서 eslint-config-prettier와 eslint-plugin-prettier를 알게 되었다. 이에 대해 더 알아보니 eslint-config-prettier와 eslint-plugin-prettier는 ESLint와 Prettier 통합 시, 필수적이라고 한다.
 
이러한 eslint-config-prettier와 eslint-plugin-prettier를 사용해야 하는 이유에 대해 조금 더 자세히 알아보자.
 
 

1. 왜 eslint-config-prettier와 eslint-plugin-prettier를 사용할까?

(1) eslint-config-prettier

- Prettier와 ESLint의 충돌을 방지
- ESLint 규칙 중 Prettier와 겹치는 스타일 관련 규칙 비활성화
- e.g. 들여쓰기, 세미콜론, 따옴표 관련 규칙 등
 

(2) eslint-plugin-prettier

- Prettier를 ESLint 규칙으로 추가
- Prettier에서 정의된 포맷팅 규칙을 ESLint를 통해 확인하고 경고나 오류로 표시
 
 

2. 설치 및 설정 방법

(0) 우리가 원하는 작동 방식 및 과정

1. 파일 저장 시, Prettier 규칙에 따라 코드가 자동 정렬
2. eslint-plugin-prettier를 통해 ESLint가 Prettier 규칙 위반 여부를 검사
3. Prettier 규칙과 ESLint 규칙 충돌은 eslint-config-prettier가 방지
 
지금부터 eslint-config-prettier랑 eslint-plugin-prettier로 ESLint와 Prettier를 통합해 자동 코드 정렬과 포맷 충돌 방지하는 방법을 알아보도록 하자.
 
 

(1) 설치

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

 

(2) ESLint 설정 파일 수정

아래는 eslint-config-airbnb, eslint-plugin-simple-import-sort, eslint-config-prettier와 함께 사용하는 ESLint 설정 파일 예시다.

// .eslintrc.json

{
  "extends": [
    "next",
    "next/core-web-vitals",
    "airbnb",
    "airbnb/hooks",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "plugins": [
    "@typescript-eslint",
    "simple-import-sort",
    "prettier"
  ],
  "rules": {
    "prettier/prettier": "error",           // Prettier 규칙 위반 시 ESLint 오류로 처리
    "simple-import-sort/imports": "error",  // import 정렬 규칙 활성화
    "simple-import-sort/exports": "error",  // export 정렬 규칙 활성화
    "react/react-in-jsx-scope": "off",      // React 17+에서는 React import 불필요
    "react/jsx-props-no-spreading": "off",  // Props 스프레딩 허용
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "ts": "never",
        "tsx": "never"
      }
    ]
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  }
}

 
"extends"에서 "next"와 "next/core-web-vitals"은 Next.js 프로젝트에서 ESLint 설정을 최적화하기 위해 사용하는 기본 확장이다. 이 두 설정은 Next.js에서 권장되며, 추가 여부는 프로젝트의 요구 사항에 따라 결정된다.
 
 
아래에서 각각의 역할과 꼭 추가해야 하는 상황을 더 자세히 알아보자.
 
1) "next"
: Next.js 기본 ESLint 규칙을 활성화함
즉, Next.js 관련 규칙을 자동으로 설정한다.
 
- Next.js 프로젝트에서 필요 없는 규칙을 비활성화하고, Next.js 환경에 적합한 규칙을 추가함
- e.g. Next.js에서 사용하는 페이지와 API 라우트의 파일 이름 규칙을 검사
 
추가해야 하는 경우
- Next.js 프로젝트를 사용하고 있고 ESLint를 설정 중이라면 반드시 포함해야 함
- 예를 들어, 다음과 같은 규칙들이 활성화됨
   a. _app.js나 _document.js의 규칙 검사
   b. 페이지 파일 이름이 소문자로 되어 있는지 확인
 
 
2) "next/core-web-vitals"
: Core Web Vitals 성능 최적화를 돕는 규칙 추가
e.g. 렌더링 최적화 및 성능 문제를 감지하는 규칙
 
- react/no-unescaped-entities: HTML 엔터티 문제 방지
- @next/next/no-html-link-for-pages: Next.js의 <Link> 컴포넌트를 사용하는지 검사
 
추가해야 하는 경우
- Core Web Vitals 성능을 중요하게 여기는 경우(예: SEO와 퍼포먼스 최적화가 중요한 프로젝트)
- Google Lighthouse 점수 최적화가 필요하거나, 페이지 로딩 속도에 민감한 경우
 
 
3) "next", "next/core-web-vitals" 를 추가하지 않아도 되는 경우
- "next": Next.js가 아닌 다른 프레임워크(예: React만 사용하는 프로젝트)에서는 필요 없음
- "next/core-web-vitals": Core Web Vitals 최적화를 따로 고려하지 않거나, Next.js 프로젝트 외의 경우에는 필요 없음
 
 

(3) Prettier 설정

: Prettier 설정 파일을 프로젝트 루트에 추가
 

// .prettierrc (또는 prettier.config.js)

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

 
이렇게 하면 eslint-config-prettier가 Prettier와 ESLint 간 충돌을 제거하여 두 도구를 함께 효율적으로 사용할 수 있다.
 
 

(4) VS Code 저장 시 자동 정렬

: VS Code에서 파일 저장 시, Prettier와 ESLint 규칙이 적용되도록 설정

// .vscode/settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"   // 저장 시, ESLint 자동 수정
  },
  "eslint.validate": ["javascript", "typescript", "javascriptreact", "typescriptreact"],
  "editor.formatOnSave": true   // 저장 시, Prettier로 포맷
}

 
위처럼 작성하면 VS Code 설정(codeActionsOnSave)으로 저장 시 자동 정렬 및 오류를 해결할 수 있다.
 
 

3. .eslintrc.json 파일의 불필요한 항목 정리

 
"next”를 추가하며 불필요한 항목과 간소화할 수 있는 부분이 생겼으니 제거해보도록 하자.
 
(1) "plugin:react/recommended”
: "next" 확장은 이미 react/recommended 규칙을 포함해서 중복되니 따로 추가할 필요 없음 (중복된 React 규칙)
 
(2) "parserOptions”
: "next"를 사용하면 next에서 기본으로 ecmaVersion, sourceType, jsx가 설정되니 필요 없음
 
(3) "import/order": "off”
: 이미 simple-import-sort 플러그인을 사용하고 있어서 import/order 규칙을 따로 비활성화할 필요 없음 (simple-import-sort로 대체 가능)
 
(4) "jsx-quotes": ["error", "prefer-single"]
: Next.js에서 제공하는 기본 ESLint와 Prettier를 통합했으므로 jsx-quotes 설정은 중복될 가능성이 높음. Prettier가 이 부분을 자동 관리하기 때문에 규칙 일관성 문제가 생길 수 있어서 필요 없음 (Prettier가 관리)
 
 

 
4항목을 제거해서 최적화를 거친 .eslintrc.json는 위 사진처럼 9줄 줄어든다.
 
이렇게 정리하고, pnpm lint 명령어를 실행해보자
 

 
ESLint 에러 1개가 발견됐다.
**eslint-config-next/core-web-vitals**와 사용자 정의 ESLint 설정에서 동일한 플러그인을 선언했기 때문에 발생한 에러다.
react-hooks 플러그인을 제거하면 해결된다.
 
eslint-config-next/core-web-vitals는 이미 react-hooks 플러그인을 포함하고 있다. 따라서 .eslintrc.json에서 직접 선언한 react-hooks 플러그인을 삭제해도 무방하다.
 

rm -rf node_modules pnpm-lock.yaml // 전체 패키지 삭제
pnpm install // 재설치

 

 
 

4. 정리 완료한 .eslintrc.json 파일

 
완성된 .eslintrc.json 파일은 위와 같다.