코딩 컨벤션

---

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

JavaScript에서 주로 쓰이는 코딩 컨벤션은 다음과 같다.

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

ESLint

---

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

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

Airbnb Style 적용하기

---

Airbnb의 .eslintrc 설정을 ESLint에 적용하고, Prettier로 자동 포맷팅을 설정할 수 있다.

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

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

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

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

• VSCode의 User Setting 파일에 "editor.formatOnSave": true를 삽입한다.(설정에 들어가서 워크벤치 -> 설정 편집기에 settings.json 파일이 존재한다.= ctrl + shift + P)