[JavaScript] ESLint와 Prettier로 코드 예쁘게 만들기 (feat. Airbnb Style Guide)

Node.js 프로젝트(React, Next.js 등)에서 개발을 진행하다 보면 예쁜 코드에 대한 욕심이 생기기 마련이다. 여기서 말하는 '예쁜 코드'란 문법적으로 올바른 코드를 의미할 뿐 아니라 일관된 컨벤션으로 작성된 코드를 의미하기도 한다. 그리고 이렇게 코드를 예쁘게 만드는 툴들은 똑똑한 사람들이 이미 만들어 놨는데, 가장 유명한 것이 바로 ESLint와 Prettier이다. 이 둘의 차이점을 간단하게 설명하면, ESLint는 코드 문법 검사 및 코드 포맷팅을 수행하는 툴이고, Prettier는 코드 포맷팅만을 집중적으로 수행하는 툴이다.

 

 

일반적으로 ESLint와 Prettier를 함께 사용하는 경우가 많다. 그러나 이때 주의가 필요하다. 왜냐하면 ESLint도 코드 포맷팅을 수행해서 Prettier의 코드 포맷팅 방식과 충돌이 발생할 수 있기 때문이다. 따라서 이번 포스팅에서는 충돌 없이 이 둘을 적절히 조합하여 사용하는 방법에 대해 알아볼 것이다.

 

또한, 필자는 널리 알려진 여러 JavaScript 코드 컨벤션 중 Airbnb Style Guide를 가장 좋아하기 때문에, ESLint에 Airbnb Style Guide를 적용하는 방법에 대해서도 다뤄볼 것이다. Airbnb Style Guide에 대한 자세한 내용은 아래 링크를 참조하자.

GitHub - airbnb/javascript: JavaScript Style Guide

마지막으로, VS Code에서 ESLint와 Prettier를 Extension으로 설치하여 해당 툴들의 기능을 에디터 자체에 장착하는 방법도 다뤄볼 것이다. 즉, ESLint의 설정에 어긋나는 코드를 표시하고, Prettier의 설정에 따라 코드 포맷팅을 수행하도록 설정하는 것이다.

 

1. eslint 패키지 설치

ESLint - Pluggable JavaScript linter

npm install --save-dev eslint

코드 문법 검사 및 코드 포맷팅을 수행하는 툴인 ESLint를 설치한다.

 

2. prettier 패키지 설치

Prettier · Opinionated Code Formatter

npm install --save-dev prettier

코드 포맷팅만을 집중적으로 수행하는 툴인 Prettier를 설치한다.

 

3. eslint-config-prettier 패키지 설치

eslint-config-prettier

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

Prettier 설정과 충돌 나는 ESLint의 설정을 비활성화하는 역할을 수행한다.

 

4. eslint-plugin-prettier 패키지 설치

eslint-plugin-prettier

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

ESLint 안에서 Prettier 검사를 실행하도록 설정한다. 즉, Prettier 검사 결과를 ESLint 검사 결과처럼 보여주도록 한다.

 

5. ESLint에 Airbnb Style Guide를 적용하기 위한 패키지 일괄 설치

npx install-peerdeps --dev eslint-config-airbnb

ESLint에 Airbnb Style Guide를 적용하기 위한 여러 개의 패키지들을 일괄 설치한다.

 

6. ESLint 설정 파일(.eslintrc.json) 작성하기

Node.js 프로젝트의 루트 디렉토리에 ESLint 설정 파일(.eslintrc.json)을 만들고 다음과 같이 작성한다.

{
  "extends": ["airbnb", "plugin:prettier/recommended"],
  "rules": {
    "react/prop-types": "off",
    "react/react-in-jsx-scope": "off",
    "react/jsx-props-no-spreading": "off"
  }
}

• extends : 이미 구성되어 있는 설정 집합을 불러오는 부분으로, 뒤에 있을수록 우선 적용된다.
• rules : 추가적으로 원하는 설정을 지정하는 부분이다.
• airbnb : ESLint에 Airbnb Style Guide를 적용한다. → eslint-config-airbnb 관련 패키지의 기능
• plugin:prettier/recommended는 다음과 같이 작성하는 것과 동일하다. → eslint-plugin-prettier 패키지의 기능

{
  "extends": ["prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off"
  }
}

• "extends": ["prettier"] : Prettier 설정과 충돌 나는 ESLint의 설정을 비활성화한다. → eslint-config-prettier 패키지의 기능
• "plugins": ["prettier"] : eslint-plugin-prettier 플러그인을 등록한다. → eslint-plugin-prettier 패키지의 기능
• "prettier/prettier": "error" : ESLint 안에서 Prettier 검사를 실행하도록 설정한다. → eslint-plugin-prettier 패키지의 기능

 

7. Prettier 설정 파일(.prettierrc) 작성하기

Node.js 프로젝트의 루트 디렉토리에 Prettier 설정 파일(.prettierrc)을 만들고 다음과 같이 작성한다.

{
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "none",
  "endOfLine": "auto"
}

• "printWidth": 100 : 한 줄의 최대 길이를 100글자로 제한한다.
• "singleQuote": true : 문자열 표현 시 작은따옴표를 사용하도록 제한한다. Airbnb Style Guide에서 이미 작은따옴표를 채택하고 있지만, 명시적으로 이를 다시 설정해주지 않으면 prettier/prettier 규칙에 의해 Prettier 디폴트 설정으로 덮어쓰기 된다.
• trailingComma : "none" : 트레일링 콤마를 사용하지 않도록 제한한다. Airbnb Style Guide에서 이미 트레일링 콤마를 금지하고 있지만, 명시적으로 이를 다시 설정해주지 않으면 prettier/prettier 규칙에 의해 Prettier 디폴트 설정으로 덮어쓰기 된다.
• "endOfLine": "auto" : 기존의 CRLF, LF 문자를 유지한다. 이를 설정해주지 않으면 디폴트 값인 "lf"으로 설정되기 때문에 개행 문자로 CRLF를 사용하는 Windows에서는 에러가 발생한다.

 

8. VS Code Extension 설치하기 (ESLint, Prettier)

먼저, ESLint Extension을 다음과 같이 설치한다. 이는 프로젝트의 ESLint 설정에 기반하여 잘못된 코드를 표시할 것이다.

 

다음으로, Prettier Extension도 같은 방법으로 설치한다. 이는 프로젝트의 Prettier 설정에 기반하여 코드 포맷팅 기능을 제공할 것이다. 코드 포맷팅 단축키는 OS마다 다른데, Windows 기준으로 Shift + Alt + F이다.

 

마지막으로, 다음과 같은 방법으로 환경 설정에 들어간 후 "Default Formatter"로 검색하여 [Default Formatter]를 [Prettier - Code Formatter]로 설정한다. 그래야 위에서 소개한 코드 포맷팅 기능이 올바르게 동작할 것이다.

 

9. 결론 (요약)

• ESLint는 코드 문법 검사 및 코드 포맷팅을 수행하는 툴이다.
• Prettier는 코드 포맷팅만을 집중적으로 수행하는 툴이다.
• 따라서 ESLint와 Prettier를 둘 다 사용하면 코드 포맷팅 방식에서 충돌이 발생할 수도 있다. 따라서 다음과 같은 두 개의 패키지를 이용하여 ESLint와 Prettier를 충돌 없이 적절히 조합하여 사용해줘야 한다.
  • eslint-config-prettier 패키지 : Prettier 설정과 충돌 나는 ESLint의 설정을 비활성화한다.
  • eslint-plugin-prettier 패키지 : ESLint 안에서 Prettier 검사를 실행하도록 설정한다.
• VS Code에서의 코드 문법 검사는 (Prettier 설정을 포함하는) ESLint의 설정에 의존한다.
• VS Code에서의 코드 포맷팅(Windows 기준 Shift + Alt + F)은 (ESLint가 아닌) Prettier의 설정에 의존한다.