ESLint, Prettier

Front-end/깊게 파고들기

ESLint, Prettier

아지송아지 2022. 4. 26. 15:06

npm install --save-dev --save-exact prettier

안녕하세요!

오늘은 ESLint, Prettier에 대해 알아보겠습니다.

"어떻게"보다 "왜"에 집중해보겠습니다.

왜 ESLint, Prettier를 써야 하는 걸까요?

프로젝트를 하다 보면 팀 단위로 진행을 할 때가 많습니다.

그럴 때 깔끔하고 통일된 코드를 위해 규칙을 정합니다. 코드 컨벤션을 만드는 것이죠.

ESLint는 코드 퀄리티를 보장하며, Prettier는 코드 스타일을 보장합니다.

ESLint?

문법적인 오류나 안티 패턴을 찾아주고 일관된 코드 품질로 작성하도록 도와줍니다. 외부에 공개되어 많은 개발자가 사용 중인 Airbnb Style Guide, Google Style Guide 가 그 대표적인 예입니다.

Prettier?

줄 바꿈, 공백, 들여 쓰기 등 일관된 스타일로 작성하도록 도와줍니다.

먼저 eslint부터 알아보겠습니다.

ESLint!

1. eslint 설치

npm install eslint

eslint를 사용하기 위해서는 두 가지 세팅이 필요합니다.

npm 혹은 yarn을 통해 설치하고, VSCode Extensions에서 eslint를 검색하여 설치합니다.

* 추가 지식 (VSCode Extension 설명)

The extension uses the ESLint library installed in the opened workspace folder. If the folder doesn't provide one the extension looks for a global install version.

ESLint는 워크스페이스에서 먼저 설치된 것을 찾으며, 없으면 전역에서 찾습니다.

2. eslint 설정

1번 단계를 모두 했으면 사용할 준비는 끝났습니다.

이제 세팅한 환경에서 무슨 규칙으로 어떻게 사용할 건지 정해봅시다.

eslint --init

명령어를 실행하면 몇 가지 질문들을 하는데 저는 아래와 같이 답변했습니다.

끝나면 .eslintrc(.js / .json) 파일이 자동으로 생성됩니다.

특정 프로젝트를 자동으로 세팅해주는 라이브러리의 경우 이미 설치되어 있을 수 있습니다.

eslintrc 파일에는 여러 가지 속성이 있습니다.

env

정의된 함수나 전역 변수 사용을 정의합니다.

browser:true, node:true 로 설정하면 console.log(), require 등을 에러 없이 사용할 수 있습니다.

  env: {
    node: true,
    browser: true,
  },

parser

기본적으로 Espree 파서를 사용합니다. 필요에 따라 다른 파서들도 사용합니다.

Babel : babel-eslint
- ESLint는 기본적으로 ES6 / JSX / spread까지 문법만 지원하여 그 이상의 문법이 필요할 경우 반드시 사용해야 합니다.
Typescript : @typescript-eslint/parser

{
    parser: "babel-eslint",
    // parser: "@typescript-eslint/parser"
}

parserOptions

ESLint를 사용하기 위해 지원하려는 Javascript 옵션을 지정할 수 있습니다.

sourceType : parser의 export 형태를 설정
ecmaVersion : ECMAScript 버전 설정
ecmaFeatures : ECMAScript의 언어 확장 기능 설정
- impliedStric: strict mode 사용 여부
- jsx: ECMScript 규격의 JSX 사용 여부 (ESLint가 react를 잘 분석하기 위해서는 eslint-plugin-react를 설치)

{
    parserOptions: {
        sourceType: 'module',
        ecmaVersion: 6,
        ecmaFeatures: { jsx: true },
    }
}

plugins

플러그인 패키지를 설치하고, 사용할 플러그인을 가져옵니다.

가져오는 것만으로는 아무 일도 일어나지 않습니다.

사용하기 위해서는 extends나 rules에 추가해야 합니다.

eslint-plugin- 접두사는 생략 가능합니다.

{
    plugins: [
        // 'eslint-plugin-react', eslint-plugin- 생략 가능
        'react', 
    ],
}

몇 가지 플러그인을 소개해드리겠습니다.

eslint-config-next : next 규칙을 추가
eslint-plugin-import : ES6의 import/export 체크, 파일 경로, import 이름 등 체크
eslint-plugin-react : 리액트 규칙을 추가
eslint-plugin-react-hooks : React함수 내에서 / 최상위에서 Hook을 호출해야 하는 규칙을 강제
eslint-config-prettier : ESLint와 Prettier가 충돌하면 ESLint에서 해당 부분을 비활성화
eslint-plugin-prettier : Prettier를 ESLint 플러그인으로 추가, Prettier 포맷 오류를 ESLint 오류로 출력

extends

플러그인에서 사용해야 하는 규칙을 설정합니다.

가져온 플러그인을 rules에 일일이 넣는 것이 아닌 한 번에 적용합니다.

rules

플러그인에서 가져와 사용할 규칙들을 넣어주면 됩니다.

가져온 플러그인 중 특정 에러를 끄고 싶다면 여기서 설정합니다.

eslint-plugin- 접두사는 반드시 생략해야 합니다. (ESLint는 접두사 없이 이름을 사용하여 규칙을 찾습니다.)

이곳에서 여러 규칙들을 볼 수 있습니다.

세 가지 속성이 있습니다.

off : 규칙을 사용하지 않음
warn : 규칙을 경고로 사용
error : 규칙을 에러로 사용

ESLint 검사 자체를 무시하고 싶다면, 파일 최상단에 아래 코드를 추가하시면 됩니다.

/* eslint-disable */

Prettier!

이제 prettier를 알아봅시다!

prettier를 사용하는 방법은 총 두 가지입니다.

1. VSCode Extension 직접 세팅

2. prettier 플러그인 세팅

1. VSCode Extension 직접 세팅

Extension에서 prettier를 설치합니다.

Settings에 들어가서 원하시는 대로 설정합니다.

* Settings 들어가는 방법

On Windows/Linux - File > Preferences > Settings
On macOS - Code > Preferences > Settings

2. prettier 플러그인 세팅

npm install --save-dev --save-exact prettier

위 명령어로 설치를 합니다.

.prettierrc 파일을 만들어 세팅합니다.

{
  "singleQuote": true, // ''를 사용하는지 여부, 기본값은 ""
  "tabWidth": 2, // 탭 너비 
  "printWidth": 80, //  줄 바꿈 할 길이 (80자 이상이면 줄 바꿈)
  "trailingComma": "all", // 객체, 배열, 함수 등의 후행에 쉼표를 찍을지 제어
  "semi": true, // 세미콜론 사용 여부
  "arrowParens": "avoid", // 화살표 함수 괄호 사용 방식
  "overrides": [ 
    {
      "files": "*.json",
      "options": {
        "printWidth": 200
      }
    }
  ], // 특정 파일별로 옵션을 다르게 설정
}

이외에도 많은 속성들이 있습니다.

* 우선순위

두 방법 모두 세팅되어 있다면 .prettierrc이 우선적으로 적용됩니다.

사용하기

저장을 하면 자동으로 바꿔주는 기능을 사용해 보겠습니다.

1. 세팅에 들어가 format on save를 검색합니다.

아래와 같이 체크를 활성화시켜줍니다.

2. command+shift+p 를 누르고 검색창에 ">Open Settings (JSON)"을 검색하여 들어갑니다.

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

위 코드를 추가/수정합니다.

감사합니다.

참고 :

https://tech.kakao.com/2019/12/05/make-better-use-of-eslint/

https://velog.io/@kyusung/eslint-config-2#%ED%99%98%EA%B2%BDenv

https://develoger.kr/frontend/eslint-기본적인-사용법/

https://velog.io/@rimo09/ESLint-%EC%84%A4%EC%A0%95

https://velog.io/@mayinjanuary/Next.js-세팅하기-ESLint-Prettier-설정

https://velog.io/@velopert/eslint-and-prettier-in-react

https://helloinyong.tistory.com/325

https://code.visualstudio.com/docs/getstarted/settings

https://pstudio411.tistory.com/entry/아-보기-좋은-코드다-Prettier-알아보기

'Front-end > 깊게 파고들기' 카테고리의 다른 글

Javascript 비동기 (0)	2022.04.17
React 생명주기 그리고 React hook (0)	2022.04.16
Javascript Event Loop 이벤트 루프 정리 (2)	2022.04.16
React Hook에서 클로저는 어디서 쓰일까? (0)	2022.04.16
웹사이트 성능 최적화 정리 (0)	2022.04.15

현재글ESLint, Prettier

코드로 대화하기

ESLint, Prettier

ESLint?

Prettier?

ESLint!

Prettier!

사용하기

'Front-end > 깊게 파고들기' 카테고리의 다른 글

'Front-end/깊게 파고들기'의 다른글

티스토리툴바

ESLint, Prettier

ESLint?

Prettier?

ESLint!

Prettier!

사용하기

'Front-end > 깊게 파고들기' 카테고리의 다른 글

'Front-end/깊게 파고들기'의 다른글

관련글

티스토리툴바