[Node JS] 개발 환경 - Prettier, Eslint

//.eslintrc.js

module.exports = {
  extends: ["airbnb-base", "plugin:node/recommended", "prettier"],
}

 

Prettier

Code Formatter는 개발자가 작성한 코드를 정해진 코딩 스타일을 따르도록 변환해주는 도구다.

Prettier는 이러한 Code Formatter 중에서도 많은 인기가 있는 자바스크립트 라이브러리다.

 

Prettier 적용하기

폴더 구조

vscode 확장에서 해당 모듈을 설치한다.

 

 

npm 모듈을 이용하여 prettier를 설치합니다.

npm install prettier

 

.vscode/settings.json 파일을 생성하여 prettier를 사용한다는 설정을 합니다.

//.vscode/settings.json

{
    "[javascript]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

 

.prettierrc 파일을 생성하여 prettier를 설정 합니다.

//.prettierrc

{
    "semi": false,
    "singleQuote": false
}

"semi" : false는 ';'를 자동으로 삭제해줍니다.

"singQuote"는 따옴표를 홑따옴표를 사용 여부 입니다.

더 다양한 옵션이 있지만 구글링을 통해서 찾아봅시다!

 

Prettier 설정 끝!! 

 

ESLint

ESLint는 문법 상의 오류를 찾아줍니다.

저희는 airbnb-base를 사용합니다.

 

아래의 4가지 모듈을 npm으로 설치

npm install eslint
npm install eslint-config-airbnb-base 
npm install eslint-config-prettier
npm install eslint-plugin-import
npm install eslint-plugin-node

.eslintrc.js 파일을 생성하여 아래와 같이 적어줍니다.

//.eslintrc.js

module.exports = {
  extends: ["airbnb-base", "plugin:node/recommended", "prettier"],
}

"airbnb-base" -> 에어비앤비에서 만든 포멧 입니다.

https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb

GitHub - airbnb/javascript: JavaScript Style Guide

 

"plugin:node/recommended" -> 노드 버전 사용

"prettier" -> prettier랑 중복 문제 해결(반드시 마지막에 기입)