🧩 Coding convention

참고:
eslint-config-airbnb
Airbnb JavaScript Style Guide
Integrating Prettier + ESLint + Airbnb Style Guide in VSCode

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

1. 다양한 기업의 코딩 컨벤션

Airbnb Style Guide - 본 프로젝트 사용 컨벤션
JavaScript Standard Style
Idiomatic JavaScript Style Guide
Google Style Guide

2. Install

1. npm과 npx를 설치한다.
2. VSCode 익스텐션 ESLint, Prettier를 설치한다.
3. ESLint와 Prettier 라이브러리를 프로젝트에 설치한다. 프로젝트의 루트 디렉토리에서 다음 명령어를 실행한다.

> npm install -D eslint prettier

5. Airbnb config를 설치한다. npm 5+를 사용한다면 다음 명령어를 통해 모든 패키지를 설치할 수 있다.

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

6. eslint-config-prettier와 eslint-plugin-prettier를 설치한다.

> npm install -D eslint-config-prettier eslint-plugin-prettier

7. 프로젝트의 루트 디렉토리에 .eslintrc.json 파일을 생성하고 다음 내용을 작성한다.

{
  "extends": ["airbnb", "prettier"], //이 설정 파일은 airbnb 스타일 가이드와 prettier의 스타일 가이드를 확장한다.
  "plugins": ["prettier"], //prettier 플러그인을 사용한다.
  "rules": {
    "prettier/prettier": ["error"], //prettier에서 발생한 모든 스타일 경고를 에러로 취급한다.
    "no-unused-vars": "warn", //선언했으나 사용되지 않은 변수가 있다면 경고로 표시한다.
    "no-undef": "off" //알 수 없는 값에 대해 경고를 끈다.
  },
  "env": {
    "browser": true, //브라우저 환경에서 작동할지 여부를 설정한다.
    "node": true, //Node 환경에서 작동할지 여부를 설정한다.
    "es2021": true //ECMAScript 2021 표준을 지원할지 여부를 설정한다.
  },
  "overrides": [
    {
      "env": {
        "node": true //Node 환경에서 작동할지 여부를 설정한다.
      },
      "files": [".eslintrc.{js,cjs}"], //이 설정이 적용되는 파일들의 패턴을 명시한다.
      "parserOptions": {
        "sourceType": "script" //설정 파일의 소스 타입을 'script'로 명시한다.
      }
    }
  ],
  "parserOptions": {
    "ecmaVersion": "latest", //마지막 ECMASclima의 버전을 사용해 파싱한다.
    "sourceType": "module" //전체 프로젝트의 소스 타입을 'module'로 명시한다.
  }
}

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

{
  "arrowParens": "avoid", // 화살표 함수 괄호 사용 방식
  "bracketSpacing": false, // 객체 리터럴에서 괄호에 공백 삽입 여부 
  "endOfLine": "auto", // EoF 방식, OS별로 처리 방식이 다름 
  "htmlWhitespaceSensitivity": "css", // HTML 공백 감도 설정
  "jsxBracketSameLine": false, // JSX의 마지막 `>`를 다음 줄로 내릴지 여부 
  "jsxSingleQuote": true, // JSX에 singe 쿼테이션 사용 여부
  "printWidth": 100, //  줄 바꿈 할 폭 길이
  "proseWrap": "preserve", // markdown 텍스트의 줄바꿈 방식 (v1.8.2)
  "quoteProps": "as-needed", // 객체 속성에 쿼테이션 적용 방식
  "semi": true, // 세미콜론 사용 여부
  "singleQuote": true, // single 쿼테이션 사용 여부
  "tabWidth": 2, // 탭 너비 
  "trailingComma": "all", // 여러 줄을 사용할 때, 후행 콤마 사용 방식
  "useTabs": false, // 탭 사용 여부
  "rangeStart": 0, // 포맷팅을 부분 적용할 파일의 시작 라인 지정
  "requirePragma": false, // 파일 상단에 미리 정의된 주석을 작성하고 Pragma로 포맷팅 사용 여부 지정 (v1.8.0)
  "insertPragma": false, // 미리 정의된 @format marker의 사용 여부 (v1.8.0)
  "overrides": [ 
    {
      "files": "*.json",
      "options": {
        "printWidth": 200
      }
    }
  ], // 특정 파일별로 옵션을 다르게 지정함, ESLint 방식 사용
}

9. VSCode의 User Setting 파일(setting.json)에 "editor.formatOnSave": true를 삽입한다.