[React] ESLint & Prettier 설정 방법

+) 팀 프로젝트에서 ESLint & Prettier 적용한 내용 https://jjang-j.tistory.com/129

프로젝트 초기 세팅 (with 템플릿, eslint, prettier, commitLint, tailwind)

 

시작하며...

팀 프로젝트를 하다보면, 사람마다 코드 스타일이 다른 경우가 발생한다.

그래서 코드의 규칙을 설정하여 일관성을 맞춰주기 위해 eslint 와 prettier 를 사용한다.

 

실제로 나도 팀프로젝트를 진행하면서 eslint 와 prettier 를 사용하였고,

우아한테크코스 프리코스를 진행하면서도 eslint 와 prettier 를 계속 사용할 만큼 개발할 때 중요한 기술이다.

 

ESLint & Prettier 란?

그럼 여기서 eslint 와 prettier 는 정확하게 무엇일까?

ESLint

ESLint 는 간단하게 말하자면 코드 구현 방식 규칙을 설정해주는 것이다.

즉 코드를 구현하는 방식을 일관성 있게 설정해주는 것이다.

 

그래서 맞는 코드여도 규칙을 지키지 않았다면 해당 부분에 오류 flag 를 자동으로 달아준다.

 

Prettier

Prettier 는 코드 텍스트 스타일 을 일관성있게 작성해주는 것을 도와준다.

예를 들어 공백, 들여쓰기, 줄바꿈 등 코드 스타일을 규칙대로 맞춰준다.

 

ESLint & Prettier 사용하기

eslint 와 prettier 를 동시에 사용할 경우

코드의 구현 방식과 텍스트 스타일을 일관성 있게 맞춰줄 수 있어 깔끔하고 보기 좋은 코드를 작성할 수 있다.

 

그러나!

eslint 에 코드 스타일 규칙을 설정하는 부분이 있어,

prettier 와 기능이 일부 겹치는 부분이 있어 충돌이 일어날 수 있다.

 

그래서 eslint 에서는 prettier 와 겹치는 기능을 꺼주기 위해

eslint-config-prettier 를 사용해야 한다. (다른 방법도 있음)

GitHub - prettier/eslint-config-prettier: Turns off all rules that are unnecessary or might conflict with Prettier.

 

ESLint & Prettier 설정하기

확장 프로그램 설치

설정하기 전에 vs code 에서 eslint 를 사용할 수 있도록 확장 프로그램을 설치해야한다.

ESLint 설정

프로젝트에 ESLint 를 설정하기 위해 터미널창에 npm init @eslint/config 를 입력한다.

 

그러면 ESLint 를 어떻게 설정할지 질문을 하게 되며, 원하는 내용으로 선택하면 된다.

 

1. How would you like to use ESLint?

❯ To check syntax, find problems, and enforce code style

코드 구문 검사, 문제 식별, 코드 스타일 강제 적용 에서 원하는 만큼 선택한다.

 

2. What type of modules does your project use?

❯ JavaScript modules (import/export)

import/export 를 사용하면 JavaScript modules, require/exports 를 사용하면 CommonJS 를 선택한다.

 

3. Which framework does your project use? 

❯ React

본인이 해당 프로젝트에서 사용하는 프레임워크를 선택한다.

 

4. Does your project use TypeScript?

❯ No

자바스크립트를 사용하면 No, 타입스크립트를 사용하면 Yes 를 선택한다.

 

5. Where does your code run?

❯ Browser

중복 선택 가능하며, 코드가 웹 브라우저 환경에서 실행되면 Browser, Node.js 환경에서 실행되면 Node 를 선택한다.

 

6. How would you like to define a style for your project?
❯ Use a popular style guide
널리 사용되는 코드 스타일 가이드를 사용하고 싶으면 Use a popular style guide,

본인이 직접 선호하는 코드 스타일을 설정하고 싶으면 Answer questions about your style 를 선택한다.

 

7. Which style guide do you want to follow?
❯ Airbnb각 스타일에 대한 내용은 링크를 통해 확인할 수 있으며, 본인이 원하는 스타일을 선택한다.Airbnb: https://github.com/airbnb/javascript
Standard: https://github.com/standard/standard
Google: https://github.com/google/eslint-config-google
XO: https://github.com/xojs/eslint-config-xo

 

8. What format do you want your config file to be in?

❯ JavaScript

본인이 선호하는 설정파일의 포맷을 선택한다.

 

9. Would you like to install them now?

❯ Yes

 

10. Which package manager do you want to use?

❯ npm

본인이 선호하는 패키지 매니저를 선택한다.

 

그러면 정상적으로 eslint 가 설정이 되고, 설정 파일이 생긴 것을 확인할 수 있다.

 

Prettier 설정

Prettier 를 설정하기 위해 터미널창에 npm i -D prettier eslint-config-prettier 를 입력한다.

그러면 prettier 와 eslint-config-prettier 가 설치된다.

 

이제 원하는 코드 텍스트 스타일을 지정해주기 위해 prettier 설정 파일인 .prettierrc 를 만들어준다.

 

해당 파일에 원하는 코드 텍스트 스타일을 지정해준다.

{
  // 홑따옴표 사용 유무
  "singleQuote": true,
  // 문장 끝 세미콜론 추가 여부
  "semi": true,
  // 탭 너비 설정
  "tabWidth": 2
}

 

이외에도 다양한 옵션에 대한 자세한 내용은 아래 링크에서 확인할 수 있다.

Prettier · Opinionated Code Formatter

 

ESLint & Prettier 충돌 방지

eslint 와 prettier 의 충돌을 방지하기 위해 eslint 설정파일 .eslintrc.js 에서 extends 부분을 다음과 같이 수정한다.

extends: ['airbnb-base', 'prettier'],

 

자동 코드 수정

파일을 저장할 때, 설정한 규칙이 적용되도록 세팅해야 된다.

 

vs code 설정에 들어가서

 

자동저창을 off 하고,

설정 열기를 클릭하여 setting.json 파일을 연다.

 

그리고 아래 코드를 추가하거나 수정해준다.

"editor.formatOnSave": true,
"editor.codeActionsOnSave": { "source.fixAll.eslint": true },
"editor.defaultFormatter": "esbenp.prettier-vscode",

그러면 파일을 저장할 때마다, eslint 와 prettier 를 설정해놓은 내용에 따라 자동으로 코드가 수정이 된다.