ESLint, Prettier의 차이 + 설정 방법

어렴풋이 알고 있던 ESLint와 Prettier에 대해 이번 포스팅에서 제대로 알아보려 한다.

둘 다 코드의 규칙을 정해주어 협업할 때 일관성 있는 로직 작성을 도와주는 것이라고는 알고 있는데,

정확히 둘의 차이는 무엇이며, 어떻게 사용하는 것일까? 🤔

ESLint

ESLint는 자바스크립트 코드에서 발견되는 문제시되는 패턴들을 식별하기 위한 정적 코드 분석 도구이다. 

 

ESLint에 대해 검색하면 가장 자주 보이는 문장이나, 와닿지가 않기 때문에 예시 코드로 알아보자.

// function 키워드 사용
function foo() {
 ...
}

// arrow function 사용
const foo = () => {
 ...
}

 

위 예시코드 처럼 함수를 생성할 때 누군가는 function 키워드를 사용하고, 누군가는 화살표 함수를 사용한다.

뿐만 아니라, 반복문도 for, forEach, map 등 다양한 방법을 사용할 수 있는데

이런 방식을 일관성있게 코드를 작성하도록 도와주는 것이 ESLint의 역할이다.

그렇다면 Prettier는 Eslint와 무엇이 다를까?

Prettier

코드 구현과는 관련없는, 일관된 텍스트 작성을 도와주는 도구이다.

 

일관된 텍스트 작성이라는 말만 보면 ESLint와 다를 것이 없어보인다. 이것도 예시 코드로 더 자세히 알아보자.

const foo = () => {
  const a = [1, 2, 3];  // 스코프 내부 작성 시 두 공백 들여쓰기, 세미콜론 있음
}

const foo = () => {
    const a = [1, 2, 3]  // 스코프 내부 작성 시 네 공백 들여쓰기, 세미콜론 없음
}

 

이처럼 Prettier는 코드 구현보다 공백, 들여쓰기, 줄바꿈 등 텍스트 작성 부분에 있어 일관성있게 코드를 작성하도록 도와준다.

 

ESLint와 Prettier는 차이가 있지만 일관성 있게 코드를 작성하는 것을 도와주기 때문에 중복되는 규칙도 존재한다.

ESLint와 Prettier 설정 방법을 알아보면서 중복되는 규칙을 어떻게 제거하는지도 추가로 알아보자.

 

ESLint 설정하기

ESLint를 설정하는 방법은 두가지가 있다.

• 내 IDE 환경에 extension을 설치해서 설정하기
• .eslintrc 파일로 설정하기

2번 방법으로 eslint 규칙을 설정해두고 1번 방법을 사용해 내 개발 에디터에 extension을 추가하면
저장 시 자동으로 lint 에러 수정과 같은 기능을 사용 할 수 있다.
1번 방법은 사용하는 개발 툴에 따라 방법이 달라지기 때문에 이번 포스팅에서는 2번 방법에 대해서만 알아보려 한다.

 

1. 프로젝트에 eslint 관련 라이브러리 설치

내가 eslint 관련해서 설치한 라이브러리는 다음과 같다.

• eslint : eslint 라이브러리
• eslint-config-prettier : eslint와 prettier의 설정 중복 부분이 존재하면 prettier의 규칙에서 제외하는 플러그인
• eslint-plugin-prettier : eslint 규칙인 것 처럼 prettier를 사용할 수 있게 만들어주는 플러그인
• typescript-eslint : 타입스크립트 전용 eslint 플러그인

이외에도 다양한 플러그인들이 있다. 내가 직접 규칙을 만들지 않고 잘 만들어진 규칙을 가져와 사용하고 싶다면

가장 유명한 에어비엔비 린트 플러그인인 eslint-config-airbnb를 설치해서 사용 할 수도 있다.
나는 에어비엔비 린트 플러그인을 사용 할거기 때문에 에어비엔비 린트 플러그인을 사용하기 위한 모든 디펜던시를 설치해주는
npx install-peerdeps --dev eslint-config-airbnb 명령어를 사용했다.

 

2. eslint 설정파일 생성하기

프로젝트 루트에 .eslintrc.js 파일을 생성한다.

파일은 json 형식이나 js 형식중에 자유롭게 생성해도 되는데, 나는 js 형식으로 생성했다.

// .eslintrc.js

module.exports = {
  root: true,
  plugins: ["import", "react", "@typescript-eslint"],
  extends: [
    "airbnb",
    "plugin:import/recommended",
    "plugin:react/recommended
  ],
  rules: {
    "no-console": "error",
  },
  env: {
    browser: true,
    node: true,
  },
  parser: "@typescript-eslint/parser",
  parserOptions: {
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 11,
  },
};

root

- default는 true, eslintrc 파일이 root 디렉토리에 존재하는지 여부를 나타낸다.

 

plugins

- 함께 사용 할 린트 플러그인

 

extends
- eslint rule 설정이 이미 저장된 외부 file을 extends 하는 부분

- 에어비앤비 린트 설정 사용을 위해 "airbnb"를 추가했다.

 

rules
- 추가적인 규칙을 설정하는 부분, extends 설정보다 우선시 된다.

 

env 

- eslint가 코드가 실행되는 환경을 이해하도록 설정
- browser:true 는 window 전역 변수 사용을 위해 필요하다.

 

parser
- eslint가 javascript 코드를 분석 할 때 사용할 파서 지정
- typescript 사용 할 경우 @typescript-eslint/parser 지정이 필요하다.

 

parserOptions
- ESLint가 어떤 ECMAScript 표준과 기능을 사용할 것인지 설정

 

설정이 완료되고 npm run start로 페이지를 띄우면

 

eslint가 정상적으로 에러를 잡아내고 있는 것을 확인 할 수 있다 🥳
에러를 수정하고 싶으면 npx eslint --fix . 명령어를 사용하면 되는데, 이 명령어로 수정이 안되는 몇몇 에러들이 있다.

 

1. JSX not allowed in files with extension '.tsx' 

확장자가 .tsx인 파일에서는 jsx가 허용되지 않음.
eslintrc.js 에 아래 구문 추가

"rules":{
  "react/jsx-filename-extension":["warn",{"extensions":[".tsx"]} }
}

 

2. Unable to resolve path to module './App'

모듈 ./App에 대한 경로를 확인 할 수 없음.

 

eslint-import-resolver-typescript --save-dev 설치

npm install eslint-import-resolver-typescript --save-dev

eslintrc.js 에 아래 구문 추가

"settings":{
  "import/resolver":{
    "typescript":{}
  }
}

Prettier 설정하기

1. 프로젝트에 prettier 관련 라이브러리 설치

npm install prettier --save-dev

2. prettier설정파일 생성하기

.prettierrc.js 파일 생성

module.exports = {
    "trailingComma":"es5",
    "tabWidth":4,
    "semi":false,
    "singleQuote":true
}

 

npx prettier --wrtie . 명령어를 사용하면 코드 포맷팅이 된다.

ESLint와 Prettier 함께 사용하기

보면 eslint와 prettier의 rule이 충돌하여 에러가 발생하는 것을 알 수 있다.

이를 방지하기 위해 텍스트 formatting 규칙에는 prettier만 사용하도록 eslint에 설정을 추가 할 수 있다.

 

1. eslint-config-prettier와 eslint-plugin-prettier를 설치한다.

npm install eslint-config-prettier --save-dev -> prettier와 충돌하는 eslint 규칙을 꺼준다.

npm install eslint-plugin-prettier --save-dev -> prettier를 eslint 규칙으로 실행시켜 준다.

 

2. .eslintrc.json에 설정을 추가한다.

extends: [
        ...
        'eslint:recommended',
        'plugin:prettier/recommended',
]

 

이렇게 설정을 완료해주면 prettier와 eslint의 충돌 없이 코드 포맷팅이 가능하다.

생각보다 설정하는데 설치되는 dependencies도 많고 시간이 꽤 걸리기 떄문에 git에 템플릿화 해서 프로젝트 시작할때마다
가져다쓰면 유용할 것 같다!

 

 

 

✨ 도움이 되었던 글들 ✨ 

- ESLint, Prettier Setting, 헤매지 말고 정확히 알고 설정하자.

- 협업을 위한 ESLint 와 Prettier 환경설정하기