코딩 컨벤션과 ESLint (ESLint+Prettier로 Airbnb JavaScript 코딩 컨벤션 적용하기)

코딩 컨벤션

---

코딩 컨벤션은 가독성이 좋고 유지보수가 용이한 코드를 작성하기 위한 코딩 스타일 규약이다.
코딩 컨벤션을 준수하면 성능에 영향을 주거나 오류를 발생시키는 잠재적 위험 요소를 줄일 수 있다.

다양한 기업에서 코딩 컨벤션(스타일 가이드)을 공개하고 있으며, JavaScript에서 주로 쓰이는 코딩 컨벤션은 다음과 같다.

• Airbnb Style Guide - 가장 보편적으로 쓰이는 코드 스타일
• JavaScript Standard Style
• Idiomatic JavaScript Style Guide
• Google Style Guide

Airbnb Style Guide 예시

• var 대신 const 사용

  // bad
  var a = 1;
  var b = 2;
  
  // good
  const a = 1;
  const b = 2;

• 객체 생성 시 new 연산자 대신 객체 리터럴 사용

  // bad
  const item = new Object();
  
  // good
  const item = {};

ESLint

---

ES는 ECMA Script 즉 표준 JavaScript를 의미하고, Lint는 소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류, 의심스러운 구초제에 표시하기 위한 도구를 말한다.

ESLint는 코드의 오류를 찾아내고 자동으로 교정하며 사전처리 코드, 커스텀 파서, 사용자 규칙 등 다양한 환경설정이 가능하다.

Node.js 환경의 npm을 통해 다운받을 수 있다.

Getting Started with ESLint

Airbnb Style 적용하기 (ESLint+Prettier)

---

Airbnb의 .eslintrc 설정을 ESLint에 적용하고, Prettier로 자동 포맷팅을 설정할 수 있다.
참고: Integrating Prettier + ESLint + Airbnb Style Guide in VSCode

0. npm과 npx를 설치한다.
1. VSCode 익스텐션 ESLint, Prettier를 설치한다.
2. ESLint와 Prettier 라이브러리를 프로젝트에 설치한다.
   프로젝트의 루트 디렉토리에서 다음 명령어를 실행한다.
   npm install -D eslint prettier
3. Airbnb config를 설치한다.
   npm 5+를 사용한다면 다음 명령어를 통해 모든 패키지를 설치할 수 있다.
   npx install-peerdeps --dev eslint-config-airbnb
4. eslint-config-prettier와 eslint-plugin-prettier를 설치한다.
   `install -D eslint-config-prettier eslint-plugin-prettier
5. 프로젝트의 루트 디렉토리에 .eslintrc.json 파일을 생성하고 다음 내용을 작성한다.

   {  
     "extends": ["airbnb", "prettier"],  
     "plugins": ["prettier"],  
     "rules": {  
       "prettier/prettier": ["error"]  
     },  
   }  

6. 프로젝트의 루트 디렉토리에 .prettierrc 파일을 생성하고 Prettier config file을 참고하여 원하는 포맷팅 옵션을 설정한다.

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

7. VSCode의 User Setting 파일에 "editor.formatOnSave": true를 삽입한다.

여담

---

미니프로젝트 때는 다들 협업이 처음이다 보니 코딩 컨벤션 없이 무작정 코드를 작성했다.
하지만 프로젝트 규모가 커질수록 다른 사람의 코드를 보는 일이 많아질 것이고, 그러면 가독성이 꽤나 중요한 요소가 될 것이다.
또 공백이나 컴마 등 사소한 스타일로 인한 코드 변경도 상당히 불편했기 때문에, 이번 프로젝트에서 코딩 컨벤션을 정하고 ESLint를 도입해서 협업 효율을 높이고 싶다.