[리액트] EsLint, Prettier 설정 + 저장시 자동 적용

 

1. 툴 설명

Eslint

자바 스크립트의 문법에 오류가 있는 부분을 체크해서 알려주는 도구

 

Prettier

코드 포맷을 정해주어 코드 컨벤션을 유지시키는 도구

 

2. VsCode 플러그인 설치

VsCode -> 좌측 네비게이션에서 플러그인 클릭 -> eslint 검색 -> eslint 설치

 

eslint

 

플러그인 prettier 검색 -> 설치

 

prettier

 

3. eslint, prettier 패키지 설치

리액트 프로젝트 이동 -> 명령어 입력

 

// 패캐지 설치
npm install eslint prettier eslint-config-prettier eslint-plugin-prettier --save-dev

// eslint init
npx eslint --init

 

 

eslint --int 과정에서 설정은 아래와 같이 진행하였는데 원하는 설정에 맞게 진행하여 설치하면 된다.

 

 

1. eslint 설정  후에 .eslintrc.js 파일 확인

2. 명령어 파레트 실행

윈도우, 우분투 -> Ctrl + Shift + p

맥 -> Shift + Command + p

3. setting.json 검색

4. user와 workspace가 있는데

setring.json user : 사용자에게 적용되기때문에 사용자 전역으로 설정이 적용됨

setring.json workspace :  현재 프로젝트 내에서만 적용이 됨

 

eslintrc 파일 확인 후 setting.json 수정

 

{
    "editor.codeActionsOnSave": {
        "source.fixAll": true,
        "source.fixAll.eslint": true
      },
      "editor.formatOnSave": true,
      "files.autoSave": "onWindowChange",
      "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[javascriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      }
}

 

setting.json에 아래와 같이 설정을 진행한다.

 

이부분을 통해서 저장시 자동으로 오류 부분을 수정하여준다.

"source.fixAll": true,

"editor.formatOnSave": true,

 

(workspace) setting.json 수정

 

 

Prettier 코드 포맷 공홈에서 미리보기

https://prettier.io/playground/

Prettier

 

Prettier 왼쪽에서 옵션 확인 후 적용하여 미리보기가 가능하다.

포맷 코드는 하단에 copy할 수 있다.

 

prettier.io 포맷 미리보기

 

 

VsCode 이동 -> 프로젝트 내에 .prettierrc 파일 생성 -> copy한 코드 포맷 붙여 넣기

이미 setting.json에 autosave 적용으로 설정을 두었기때문에 저장시 코드 포맷에 맞게 바뀌는 부분을 확인할 수 있다.

 

prettierrc 코드 포맷 적용

 

 

4. 적용 확인

 

저장시 우측하단에 Prettier탭을 클릭하여 포맷 적용을 확인할 수 있다.