NodeJS 개발을 위한 Eslint 및 Prettier 적용 방법

1. 프로젝트에 적용할 eslint 모듈 설치

npm install eslint --save-dev

 

 

 

2. eslint 설정
npx eslint --init

OK to proceed? 
 > y

How would you like to use ESLint?  
 > To check syntax, find problems, and enforce code style

What type of modules does your project use?
 > CommonJS (require/exports)

Which framework does your project use?
 > None of these

Does your project use TypeScript?
 > No

Where does your code run?
 > Node

How would you like to define a style for your project?
 > Use a popular style guide

Which style guide do you want to follow?
 > Airbnb: https://github.com/airbnb/javascript

What format do you want your config file to be in?
 > JavaScript

Would you like to install them now with npm?
 > Yes

 

 

 

3. 에디터에서 문제가 될만한 곳들을 바로 확인할 수 있는 esLint extension 설치

: 확장 > eslint 설치

 

 

 

4. 프리티어 설치

npm install prettier --save-dev
npm install eslint-config-prettier --save-dev
npm install eslint-plugin-prettier --save-dev

 

※ eslint-config-prettier: eslint의 규칙 중 필요 없거나, prettier와 충돌이 발생하는 규칙을 off 하는 패키지
※ eslint-plugin-prettier: prettier의 규칙을 eslint formatting 규칙에 추가하는 패키지

 

 

 

5. .eslintrc.json 파일 수정

: prettier, eslint를 연동하기 위해 extends에 "plugin:prettier/recommended" 추가

...
"extends": [
        "airbnb-base",
        "plugin:prettier/recommended"
    ],
...

 

 

 

6. 프리티어 설정 파일 추가

: 프로젝트 루트 디렉터리에 .prettierrc.json 추가

{
    "singleQuote": true
}

 

 

 

 

 

Prefference

VScode Code Formater 인 Prettier 완벽 적용하기

리액트 프로젝트에서 Prettier로 코드 스타일 통일하기

Prettier · Opinionated Code Formatter