내 프로젝트에 ESLint & Prettier 도입하기 (VSCode)

본 글은 2020년에 작성된 글입니다.

 

Lint란 실보푸라기를 의미한다. 보푸라기가 많은 옷은 보기 좋지 않고, 오래 입기 힘들 것이다. 하지만 입을 수는 있겠지.  

프로그래밍에서도 이런 보푸라기가 있다. 흔히들 '더러운 코드'라고 말한다. 하지만 동작은 하겠지.

 

당장은 동작하지만 에러투성이로 더러운 코드보다 여러 사람들이 읽기 쉽고, 오래 유지보수할 수 있고, 재사용성이나 확장성이 좋은 코드를 작성하는 것이 더 중요하다. 이 부분을 잡아주기 위해 코드의 오류, 코드 스타일 등을 점검하는 것을 린트(Lint) 또는 린터(Linter)라고 부른다. 이를 사용하면 코드의 가독성을 높이는 것 뿐만 아니라 동적 언어의 특성인 런타임 버그를 예방할 수 있다.

 

그럼 ESLint는 뭘까?

ESLint란 ES(EcmaScript: 자바스크립트) + Lint를 말하며, 확장성이 좋아 많이 쓰인다. 여기서 말하는 확장성이란, 다양한 플러그인을 사용할 수 있기 때문에 새로운 규칙을 추가할 수 있고 손쉽게 다른 회사나 사람의 설정을 도입할 수 있다는 것을 말한다.

 

개인적으로 클린 코드를 가장 중요한 가치로 생각한다. 누구나 코드는 짤 수 있다. 얼마나 가독성 있고 협업하기 좋은 코드를 작성하느냐가 관건인 것 같다. 소프트웨어라는게 사물의 형태로 존재하는 것이 아니라서 그 품질을 평가하기 위한 기준과 유지보수성에 대한 것을 논의하기가 아주 어려운 분야라는 것을 들은 적이 있다. 그래서 이 분야에 대한 연구가 따로 존재하기도 한다고. 그만큼 중요하고도 어려운 부분이지만 좋은 코드를 작성하기 위한 고민과 노력이 쌓일수록 더 좋은 품질의 소프트웨어를 만들어낼 수 있을 것이다.

 

자, 이제 그 첫번째 발걸음으로 내 React 프로젝트에 ESLint를 한 번 적용해보자.

 

---

ESLint & Prettier 적용하기

ESLint로 가장 많이 쓰이는 것이 airbnb에서 정의한 자바스크립트 규칙이라고 한다. 잘못된 자바스크립트 문법과 정해진 코드 스타일을 잡아준다. 이번 포스트에서는 이 규칙을 사용할 것인데, 이 규칙이 생각보다 제약이 많다. 그래서 익숙하지 않은 상태에서 처음 사용했을 때 상당히 많은 에러들에 당황의 연속을 경험할 수 있다. 🤣  

 

Prettier은 코드 스타일을 잡아주는 것이다. singlequote를 사용해라, 세미콜론 써라, 들여쓰기는 2칸이다,, 등을 잡아준다. ESLint와 Prettier을 함께 설정해주면 코드 스타일은 Prettier가, 자바스크립트 문법은 ESLint가 잡아준다. 그리고 Prettier에 자동 Fix를 설정하면 웬만한 스타일은 자동으로 수정되어서 airbnb lint만 사용하는 것보다 제약도 많이 줄어들고 훨씬 편한 것 같다.

 

1. VS Code 설정

개발을 진행하면서 Lint가 표시하는 에러들을 보고 고칠 수 있어야 한다. VS Code에서는 PROBLEMS 탭에서 에러를 확인할 수 있다. 단, 에러를 확인하기 위해서는 몇 가지 설정들이 필요하다.

 

1-1. extensions 설치 : eslint, prettier

위 extensions를 설치한 후 eslint에 의한 에러를 제대로 표시해주는지 일부러 에러 코드를 작성해서 검사해보자.

💡 만일 PROBLEMS 탭에 에러 표시가 안 된다면?
VS Code의 settings.json 파일에 들어가서 아래 설정이 되어있는지 확인해보자.

"eslint.enable": true, 
"eslint.validate": ["javascript", "javascriptreact"],

 

1-2. VS Code Settings : JavaScript Format

그 다음 VS Code의 Preferences > Settings 들어가서 Javascript > Format: Enable 부분을 체크 해제 해주자. 이유는 앞으로 직접 설정하여 사용할 것이기 때문 !!

 

 

1-3. VS Code Settings : Format On Save (선택)

그리고 이건 취향 차이라고 하는데, Format On Save를 설정해주면 파일을 저장할 때마다 자동으로 지정한 코드 스타일이 적용된다. 즉 우리가 정해준 Prettier 규칙에 따라 자동으로 코드를 fix 해주는 것!! 세팅을 좀 더 살펴보면 코드를 붙여넣을 때마다, 또는 작성할 때마다 코드를 바꿔주는 설정도 있으니 취향에 따라 설정해보면 좋을 것 같다.

 

 

2. package 설치

VS Code 관련 설정이 완료되었다면 프로젝트에 devDependency로 ESlint, Prettier 관련 패키지를 설치해주어야 한다.

  // ... package.json
  
  "devDependencies": {
    "eslint": "^6.6.0",
    "eslint-config-airbnb": "18.2.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-import": "^2.21.2",
    "eslint-plugin-jsx-a11y": "^6.3.0",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.20.0",
    "eslint-plugin-react-hooks": "4.0.0",
    "prettier": "^2.0.5"
  },

 

2-1. ESLint

airbnb eslint를 사용하기 위해 eslint-config-airbnb(React를 안 쓴다면 eslint-config-airbnb-base)를 설치해주어야 하는데, 이를 사용하기 위해서

- eslint 
- eslint-plugin-import 
- eslint-plugin-jsx-a11y 
- eslint-plugin-react 
- eslint-plugin-react-hooks

이 패키지들을 함께 설치해주어야 한다. 그러기 위해 npx install-peerdeps --dev eslint-config-airbnb 명령어를 사용하여 설치를 진행하면 된다.

 

2-2. Prettier

Prettier는 vscode의 extension으로 설치했기 때문에 따로 설치할 필요는 없지만, 프로젝트가 팀 단위로 진행되거나 package.json에 확실히 명시를 해두고 싶다면 npm install --save-dev --save-exact prettier 명령어를 통해 설치하면 된다.

 

그리고 ESLint와 Prettier 규칙의 충돌을 피하고 Prettier 오류를 Lint 에러로 보기 위해서는 eslint-config-prettier와 eslint-plugin-prettier를 설치해주면 된다. 각 패키지는 다음 역할을 한다.

• eslint-config-prettier : 불필요하거나 Prettier와 충돌이(중복이) 일어나는 모든 ESLint의 rules를 무시한다. 즉 앞서 언급했듯이 자바스크립트 문법 및 코드 품질 검사는 ESLint가, 코드 포맷은 Prettier가 검사하도록 만들어주는 것이다.
• eslint-plugin-prettier : Prettier를 ESLint 규칙에 맞게 실행하게 하고 오류를 ESLint의 오류로 나타나게 해주는 기능을 하는 패키지이다. 즉 eslint-plugin-prettier 플러그인 설치를 통해 모든 Prettier 규칙 이 ESLint 규칙으로 추가된다고 볼 수 있기 때문에 ESLint 하나만 실행해도 문법검사와 formatting을 함께 실행 시킬 수 있다.

 

3. 규칙 설정

3-1. ESLint

ESLint 규칙을 적용하는 방법은 .eslintrc 파일을 추가해서 따로 관리하거나, package.json의 eslintConfig에 설정하면 된다.

  // ... package.json
  
  "eslintConfig": {
    "extends": [
      "airbnb", 
      "plugin:prettier/recommended"
    ],
    "rules": {
      "object-curly-newline": 0,
    },
    "env": {
      "browser": true
    },
  },

• extends : airbnb와 prettier plugin을 lint로서 따른다는 것이다.
• rules : 정해진 규칙들을 수정할 수 있다. 규칙 이름과 0(off)을 설정해주면 그 규칙은 무시하겠다는 뜻이다. "object-curly-newline": 0 으로 설정하면 import를 3개 이상 하면 줄바꿈을 해줘야 하는 규칙을 무시할 수 있다.
• env : "browser": true 는 document, window 등의 브라우저 내장 객체들을 조회할 때도 ESLint 오류 없이 작업하기 위함이다.

 

3-2. Prettier

Prettier 규칙은 .prettierrc 파일에 설정하여 사용할 수 있다.

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

위 규칙이 가장 널리 사용되는 방식이다. 추가적인 옵션들은 Prettier Options 에서 확인해보고 수정하면 된다.

 

---

 

자, 이렇게 프로젝트에 ESLint와 Prettier를 설정함으로서 정해진 코드 스타일로 개발을 진행할 수 있게 되었다. 특히 팀 단위로 진행하는 프로젝트라면 여러 사람들이 코드를 작성하더라도 어느 정도의 일관적인 코드 스타일이 정해지므로 훨씬 원활하게 협업을 진행할 수 있을 것이다.

 

단, 위의 airbnb 규칙은 조건들이 워낙 많고 까다로운 편이라 팀에 알맞게 규칙을 수정하는 과정도 분명 필요하다.

 

출처 : [리액트 프로젝트에 ESLint 와 Prettier 끼얹기]
airbnb 규칙의 경우 조금 까다롭기 때문에 불편한 규칙들이 있다면 망설임없이 규칙들을 꺼가면서 개발하세요. 우리가 편하자고 하는건데 도구가 우리를 불편하게 하면 안됩니다.

 

만일 eslint를 처음 사용해본다면 규칙을 끄지 않고 모두 따라보는 것도 추천한다. 규칙이 명시하는대로 코드를 작성하다보면 그 스타일이 자연스레 습관으로 남게 되는데, 그 습관이 에디터가 없는 상황에서도 예쁜 코드를 작성하도록 해주기도 한다. 😎

 

Lint를 적용하면 문법과 코드 스타일을 잡아줄 수 있지만, 규칙의 범위 내에서 작성할 수 있는 무수한 가짓수의 코드에 대해서는 어떤 코드가 클린 코드인지 알 수 없다. 재사용성과 유지보수성이 좋은 코드를 작성하기 위해서는 JavaScript Clean Code 공부와 팀원 간 코드 리뷰 과정이 도움이 될 것이다. 공부할수록, 토론할수록 더 좋은 코드를 작성할 수 있을 것이다.

 

JavaScript의 Clean Code Guide 
- 영문 : https://github.com/ryanmcdermott/clean-code-javascript
- 한글 : https://github.com/qkraudghgh/clean-code-javascript-ko

 

😊

 

---

참고 자료

리액트 프로젝트에 ESLint 와 Prettier 끼얹기

ESLint & Prettier, Airbnb Style Guide로 설정하기