[node.js] ESLint + Prettier + Airbnb 설정 하기

자바스크립트 개발을 하다 보면 문법 오류나 코드 정리로 인해 시간을 많이 소비한다. ESLint와 Prettier는 이러한 상황을 해결해 주는 도구들이다

Airbnb 란 ESLint의 순수 기능으로도 충분하나 다른 개발자가 미리 설정해놓은 config를 불러와서 적용할 수도 있다. 그중 가장 유명한 config 중 하나인 Airbnb 스타일 가이드를 적용해보려고 한다

이번 포스팅에서는 두 가지 도구를 간단히 살펴보고 Airbnb를 적용하는 방법을 알아보겠다. 에디터는 vscode를 기준으로 하겠다

 

우선 vscode 확장 프로그램에서 아래 두 가지를 설치해 준다

 

설치가 되었다면 우선 Prettier 먼저 적용해 보겠다

해당 프로젝트에서 커맨드 창을 이용해 아래 명령어를 통해 패키지를 설치한다

 

npm install --save-dev prettier

 

-g 옵션을 주면 글로벌 옵션으로 해당 프로젝트뿐만 아니라 전역으로 설치를 하겠다는 뜻인데 이건 설치하는 사용자의 선택 사항이니 모든 프로젝트에 적용을 하려면 -g 옵션을 사용하여도 된다

 

설치가 끝났다면 해당 프로젝트 루트 경로에. prettierrc 파일을 생성한 뒤 아래와 같이 옵션을 설정한다

 

{
  "semi": false,
  "singleQuote": true
}

 

구문의 끝에 세미콜론을 안 쓰고 문장을 ' 로 묶겠다는 뜻이다

이거 외에도 여러 옵션들이 있으니 필요한 옵션이 있다면 검색해서 찾아보면 될 것이다

이제 js파일을 작성한 뒤 저장해 보면 prettier 가 우리가 설정한 데로 바꿔서 저장을 해 줄 것이다

 

이제 ESLint를 설치해 줄 것이다

 

npm install --save-dev eslint

 

설치를 한 뒤 우리가 직접 ESLint의 설정을 해줄 수도 있지만 우리는 이미 설정이 된 Airbnb를 쓸 것이기 때문에 바로 Airbnb도 설치를 해 준다

 

npm install --save-dev eslint-config-airbnb-base eslint-plugin-import

 

이 두 가지를 설치해준다

 

그다음. eslintrc.js 파일을 생성한 뒤 아래와 같이 작성한다

 

module.exports = {
  extends: ['airbnb-base'],
}

 

아마 여기까지 진행하면 prettier와 eslint가 출동하여 에러가 발생할 것이다

 

ESLint와 Prettier 충돌 해결

Prettier는 formatter고 ESLint는 linter이다

린터 룰은 크게 포맷팅(스타일) 룰과 코드 퀄리티 룰로 나눌 수 있는데 코드 퀄리티 룰은 Prettier 같은 formatter가 잡아낼 수 없기 때문에 ESLint를 사용한다

여기서 ESLint에서도 formatter를 지원하지만 Prettier를 쓰는 이유는 코드 포맷팅에 더 특화되어 있어 ESLint가 할 수 없는 것도 가능하기 때문에 Prettier를 사용하는데 여기서 충돌이 발생하게 된다

 

그래서 충돌하는 ESLint 규칙을 전부 꺼주는 방법으로 해결하는데 아래와 같이 설정한다

 

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

 

설치 후. eslintrc.js 파일 수정

 

module.exports = {
  extends: ['airbnb-base', 'prettier'],
}

 

prettier 가 제대로 적용이 되기 위해서는 항상 prettier를 마지막에 써주는 것이 좋다

이제 충돌 나는 에러는 해결이 되었을 것이다

 

마지막으로 node.js 문법에 대해서 ESLint가 검사를 하기 위해서는 플러그인을 추가해 줘야 한다

 

npm install --save-dev eslint-plugin-node

 

. eslintrc.js 파일 수정

 

module.exports = {
  extends: ['airbnb-base', 'plugin:node/recommended', 'prettier'],
}

 

이렇게 까지 하면 기본적으로 node.js에 대한 문법 및 코드 정리를 할 수 있게 된다

만약 적용이 안된다면 에디터를 재실행 해보면 정상적으로 될 것이다