ESLint와 Prettier를 사용하여 코드를 Airbnb 코딩 규칙을 적용하게 설정하는 방법

JavaScript에는 Airbnb, Google, jQuery, JavaScript Standard 등등 여러 가지 코딩 규칙(Coding Convention)이 있습니다.
오늘은 이 많은 코딩 규칙 중에 ESLint와 Prettier를 사용하여 코드를 Airbnb 코딩 규칙 (https://github.com/airbnb/javascript)으로 적용하는 방법을소개하도록 하겠습니다.

ESLint 설정 방법

1. Visual Studio Code를 실행하고, '확장 기능'에 들어가서 'ESLint'를 설치합니다.
   

2. NPM +5를 사용 중인 경우에는 npx install-peerdeps --dev eslint-config-airbnb 명령어로 패키지를추가합니다.
   

3. 아래와 같이 devDependencies에 6개의 패키지가 설치되면 정상적으로 설치된 것 입니다.

"devDependencies": {
  "eslint": "^7.26.0",
  "eslint-config-airbnb": "^18.2.1",
  "eslint-plugin-import": "^2.23.1",
  "eslint-plugin-jsx-a11y": "^6.4.1",
  "eslint-plugin-react": "^7.23.2",
  "eslint-plugin-react-hooks": "^1.7.0"
}

4. 프로젝트 최상단에 .eslintrc.yml 파일을 생성하고 아래와 같이 입력합니다.

env:
  browser: true
  es6: true
  node: true
extends:
  - airbnb

5. 예시로 Airbnb 코딩 규칙에 어긋나는 코드를 아래와 같이 작성해보았습니다.
   

6. 코드에 노란색 밑줄에 마우스를 올려놓으면 창이 하나 나타납니다. '빠른 수정...'을 클릭하고, 'ESLint: Manage Library Execution'를 클릭합니다.
   

7. 아래와 같은 창이 나오면, 'Allow Everywhere'를 클릭합니다.
   

8. ESLint가 활성화되면, 아래와 같이 Airbnb 코딩 규칙에 어긋난 부분은 붉은색 밑줄로 표시됩니다. 붉은색 밑줄 위에 마우스 커서를 올리면 원인이 출력됩니다.
   

Prettier 설정 방법

1. Visual Studio Code를 실행하고, '확장 기능'에 들어가서 'Prettier'를 설치합니다.
   

2. Ctrl + ,를 눌러 설정에 들어갑니다.
   'Default Formatter'를 검색하고, '없음'에서 'Prettier - Code formatter'로 변경합니다.
   

3. 프로젝트 최상단에 .prettierrc.yml 파일을 생성하고 아래와 같이 입력합니다.
   각 설정에 대한 설명은 아래에서 하도록 하겠습니다.

arrowParens: 'always'
bracketSpacing: true
jsxBracketSameLine: false
jsxSingleQuote: false
printWidth: 80
proseWrap: 'always'
quoteProps: 'as-needed'
semi: true
singleQuote: true
tabWidth: 2
trailingComma: 'es5'
useTabs: false

4. Airbnb 코딩 규칙을 적용할 코드를 열고 F1를 누른 뒤, 'Format Document'를 입력하고 실행합니다.
   

5. 여기서 'Format Document'를 하면 아래와 같이 Airbnb 코딩 규칙에 맞게 적용되는 것을 확인할 수 있습니다.
   (아래 사진의 붉은색 밑줄은 선언되지 않은 변수 또는 함수, 사용되지 않은 변수 때문에 붉은색 밑줄이 표시된 것입니다.)
   

6. 더 간편하게 사용하기 위해, Ctrl + ,를 눌러 설정에 들어가서 'Format on Save' 를 검색하고 설정을 합니다.
   'Format on Save'를 활성화를 하면 저장할 때 자동으로 Airbnb 코딩 규칙으로 변환되어 저장됩니다.
   

Prettier 설정에 대한 설명

• "quoteProps": "as-needed" :
  

• "singleQuote": true :
  

• "arrowParens": "always" :
  

• "tabWidth": 2, "useTabs": false :
  

• "bracketSpacing": true :
  

• "trailingComma": "es5" :
  

• "semi": true :
  

• "jsxSingleQuote": false :
  

• "jsxBracketSameLine": false :