[JavaScript] ESLint와 Prettier 충돌 해결법

본 게시글은 next14 버전과 ESLint 8 버전,naver ESLint을 바탕으로 작성되었습니다.

 

 

---

 

목차

ESLint와 Prettier 충돌 해결법

충돌 해결 확인하기

 

---

ESLint에 잘 모른다면 아래 게시글을 확인해 주세요.

https://devyihyun.tistory.com/243

[JavaScript] ESLint 이론

https://devyihyun.tistory.com/244

[JavaScript] ESLint의 구성요소

https://devyihyun.tistory.com/245

[JavaScript] naver ESLint 적용하기

 

---

[ESLint와 Prettier 충돌 해결법]

ESLint에서도 Prettier가 처리하는 작업(들여쓰기, 줄바꿈, 따옴표 등)을 처리할 수 있다.

두 가지 모두 자바스크립트 코드에서 실행한다면 서로 다른 규칙으로 인해 에러가 발생한다.

최악의 경우 ESLint,Prettier 모두 만족하지 못하는 코드가 만들어질 수 있다.

1. 규칙이 충돌되지 않게 선언하기
   • 원인 : 코드에서 ESLint를 적용하는 작업과 코드의 포매팅을 하는 작업이 서로 다른 패키지에서 발생한다.
   • 해결 : Prettier에서 제공하는 규칙을 어기지 않도록 ESLint에서는 해달 규칙을 끄기
2. 파일 유형에 따라 도구 분리
   • ESLint : 자바스크립트/타입스크립트
   • Prettier : 마크다운, JSON 등
3. eslint-plugin-prettier 활용
   • prettier 규칙을 ESLint 플러그인으로 연동하여 충돌 최소화

이렇게 Prettier와 ESLint가 서로 관여하는 파일을 물리적으로 분리한다면 코드 충돌의 위험은 없애고 Prettier가 제공하는 규칙을 사용할 수 있다.

 

---

충돌을 해결하기 위해서는 ESLint 설정 중 Prettier와 충돌하는 부분을 비활성화하면 된다.

npm install --save-dev eslint-config-prettier

또는

npm install --save-dev eslint-plugin-prettier eslint-config-prettier

• eslint-config-prettier : ESLint에서 Prettier실행시킬 수 있는 플러그인
• eslint-config-prettier : Prettier와 충돌나는 ESLint 룰을 비활성화

 

충돌을 해결하기 위해서는 플러그인을 설치해야한다.

npm install --save-dev eslint-plugin-prettier eslint-config-prettier

 

저는 ESLint와 Prettier 규칙이 서로 다르면 Prettier로 적용하도록 하겠습니다.

eslint.config.mjs에 eslintConfigPrettier, eslintPluginPrettierRecommended를 import 해줍니다.

import { FlatCompat } from "@eslint/eslintrc"
import eslintConfigPrettier from "eslint-config-prettier"
import eslintPluginPrettier from "eslint-plugin-prettier"
import { dirname } from "path"
import { fileURLToPath } from "url"
const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)

const compat = new FlatCompat({
  baseDirectory: __dirname,
})

const eslintConfig = [
  ...compat.extends("next/core-web-vitals", "next/typescript"),
  {
    rules: {
      semi: ["error", "always"],
      quotes: ["error", "double"],
    },
  },
  eslintConfigPrettier,
  eslintPluginPrettier,
]

export default eslintConfig

eslintConfig

 

settings에서는 eslint가 아닌 prettierrc 파일을 보고 포매팅하라고 설정해 줍니다.

settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

 

---

<충돌 해결 확인하기>

prettier에서는 세미콜론을 붙이지 말고 ESLint에서는 세미콜론을 붙여라고 명시해 보자

 

서로 규칙이 달라 어떤 규칙을 따라야 할지 모른다.

	prettier	ESLint
semi	false	always

 

eslint 규칙과 prettier 규칙

 

코드를 저장하면 세미콜론이 붙지 않는 것을 볼 수 있다.

eslint와 프리티어가 다른 설정을 가지고 있지만 충돌을 해결했다고 볼 수 있다.

붙지 않는 세미콜론

 

 

---

잘못된 정보는 댓글에 남겨주시면 감사하겠습니다!😊

댓글과 좋아요는 큰 힘이 됩니다!

 

[ 참고자료 ]

https://www.youtube.com/watch?v=RYTWkWOI_eg

 

https://www.youtube.com/watch?v=Be9q0k5BJ_s

 

https://www.youtube.com/watch?v=M6NVLZx2m5Y

 

https://github.com/naver/eslint-config-naver/blob/master/STYLE_GUIDE.md

eslint-config-naver/STYLE_GUIDE.md at master · naver/eslint-config-naver