ESLint와 Prettier 조합 (Feat. Typescript)

이전 글인 Typescript 절대 경로(alias) 적용하기를 기반으로 설명합니다.😊 (그냥 보셔도 상관은 없습니다!)

ESLint vs Prettier

ESLint는 ES + Lint 의 합성어로, Javascript의 에러를 표시해주는 도구예요.
Prettier는 일관적인 코딩 스타일을 유지시켜주는 code fommater입니다.

ESLint

설치

아래 명령어로 설치합니다.

$ npm i -D eslint

• eslint : ESLint 코어 모듈

설정

아래 명령어로 .eslintrc.json과 초기 설정을 간단하게 진행합니다.

$ ./node_modules/.bin/eslint --init

아래는 필자가 선택한 답변입니다.

How would you like to use ESLint?

• To check syntax and find problems

What type of modules does your project use?

• JavaScript modules (import/export)

Which framework does your project use?

• None of these

Does your project use TypeScript?

• Yes

Where does your code run?

• Node

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

• JSON

Would you like to install them now?

• Yes

  🚨 참고사항
  @typescript-eslint/parser : ESLint의 Parser인 espree를 대신하는 Typescript 전용 Parser 모듈
  @typescript-eslint/eslint-plugin : ESLint 규칙들을 사용할 수 있도록 도와주는 모듈

Which package manager do you want to use?

• npm

설치가 완료됐다면 .eslintrc.json 파일이 생깁니다.

테스트(1)

테스트를 위해 .eslintrc.json 파일에서 rules 속성 안에 아래 값을 추가합니다.

{
  ...,
  "rules": {
    "no-console": 'error'
  }
}

index.ts에 console.log를 사용하고 있으니, 에러가 발생해야 합니다.
ESLint를 사용해봅시다.

$ ./node_modules/.bin/eslint ./src/index.ts

에러가 발생되네요!

Airbnb Style Guide

이렇게 에러를 하나하나 설정하는건 너무 귀찮아요 :(
코딩 스타일 규칙을 정해놓은, 많은 개발자분들이 사용하는 airbnb 규칙을 적용하겠습니다.

# 설치 전에 의존성 라이브러리 확인
$ npm info eslint-config-airbnb-base peerDependencies
{ eslint: '^7.32.0 || ^8.2.0', 'eslint-plugin-import': '^2.25.2' }

# 설치
$ npm i -D eslint-plugin-import eslint-config-airbnb-base

테스트 (2)

아까 테스트할 때 추가한 no-console 을 제거해주세요.
그리고 extends에 airbnb-base를 추가합니다.

{
  ...,
  "extends": [
    ...,
    "airbnb-base"
  ],
  ...,
  "rules": {}
}

ESLint를 사용해봅니다.
이번엔 src 하위 파일을 전부 검사 해볼게요!

$ ./node_modules/.bin/eslint ./src

으악 에러가 너무 많아..

에러 해결하기

필자가 발생한 에러는 처리해볼게요!

• no-console
  console.log() 사용 시 warning
  이건 그냥 두겠습니다.🤤

• quotes
  작은 따옴표 '' 시 error 발생

• linebreak-style
  개행문자로 인해 생긴 문제로, 기본적으로 ['error', 'unix']로 설정되어있어 error 발생

  💡 unix는 LF개행을, windows는 CRLF 개행을 사용해요 :)
  필자는 windows 환경이예요.

• import/extensions
  js, mjs, jsx를 제외한 다른 파일은 확장자를 넣어 import 해야하기 때문에 error 발생
  ts 파일도 확장자 없이 import가 가능하도록 해야함

  💡 기본값은 여기서 확인했어요 :)

• import/no-unresolved
  확인되지 않은 경로라고 판단하여 error 발생

  💡 해결 방법은 여기에 적혀있어요 :)

• no-unused-vars
  사용되지 않은 변수는 error 발생

  💡 해결방법은 여기에 적혀있어요 :)

아래는 필자의 설정 결과입니다.

{
  ...중략,
  "rules": {
    "@typescript-eslint/no-unused-vars": [
      "warn",
      {
        "argsIgnorePattern": "^_" // 사용하지 않는 parameter명은 _ 통상 붙인다
      }
    ],
    "import/extensions": [
      "error",
      {
        "ts": "never"
      }
    ],
    "linebreak-style": ["error", "windows"],
    "no-unused-vars": "off",
    "quotes": "off"
  },
  "settings": {
    "import/resolver": {
      "typescript": {}
    }
  }
}

다시 검사를 해봅니다.

$ ./node_modules/.bin/eslint ./src

에러가 사라졌습니다!😚

Prettier

설치

아래 명령어로 설치합니다.

$ npm i -D prettier

설정

.prettierrc 파일을 생성 후 설정 파일을 작성합니다.

// 필자가 주로 사용하는 prettier 설정
{
  "printWidth": 120, // 한 라인의 최대 글자 수
  "singleQuote": true, // 작은 따옴표 사용 여부
  "trailingComma": "all" // 마지막 요소에 ','를 붙일지 여부
}

💡 자세한 옵션은 Prettier Options에서 확인하세요. :)

실행

아래 명령어로 prettier를 사용할 수 있습니다.

$ ./node_modules/.bin/prettier --write ./src

이러면 prettier 설정한대로 코드 포맷이 바뀔거예요!

이제 Lint를 다시 수행하겠습니다.

$ ./node_modules/.bin/eslint ./src

다시 에러가 발생합니다!!!😦 (다 해놨는데..)
아까 ESLint에서는 CRLF로 설정했지만, Prettier는 default 설정이 LF이기 때문입니다.

이런식으로 ESLint에서 코드 포맷팅에 관여하는 부분을 비활성화 시켜 충돌이 발생하지 않도록 해야합니다.

💡 코드 오류는 ESLint! 코드 포맷팅에는 Prettier!

ESLint와 Prettier 충돌 처리

$ npm i -D eslint-config-prettier

• eslint-config-prettier
  ESLint에서 Prettier와 충돌하는 부분을 비활성화하는 모듈

🚨 참고사항
eslint-plugin-prettier : prettier를 eslint의 rules로 동작하게 하는 모듈. 하지만 포맷팅 문제도 오류로 출력되어 오류 메시지가 지나치게 많아지고 느려지는 문제가 있어 비추천

이제 .eslintrc.json 의 rule 부분에서 코드 스타일 관련 rule은 제거해줍니다.
그리고 설치한 모듈을 사용하도록 등록합니다.

{
  ...,
  "extends": [..., "prettier"],
  ...,
  "rules": {
    "@typescript-eslint/no-unused-vars": [
      "warn",
      {
        "argsIgnorePattern": "^_" // 사용하지 않는 변수는 prefix로 _ 붙이기
      }
    ],
    "import/extensions": [
      "error",
      {
        "ts": "never"
      }
    ],
    "linebreak-style": ["error", "windows"], // ⛔ 제거
    "no-unused-vars": "off",
    "quotes": "off" // ⛔ 제거
  },
}

이제 다시 한 번 해봅시다!

# prettier 처리
$ ./node_modules/.bin/prettier --write ./src

# eslint 처리
$ ./node_modules/.bin/eslint ./src

원하는대로 잘 됐습니다.🙃

(부록) VSCode Extention

VSCode를 사용중이라면, ESLint와 Prettier Extention을 사용해 쉽게 처리할 수 있습니다. :)

ESLint

위 이미지처럼 warning 표시가 나타나게 됩니다.

Prettier

Prettier의 경우, 저장 시에 바로 동작하도록 하여 편하게 사용할 수 있어요.
Windows에서는 Ctrl + ,, Mac에서는 Cmd + ,을 사용해 설정창으로 이동합니다.

format on save 검색하여 활성화 체크를 합니다.

세미콜론을 제거하고 저장해보겠습니다.

잘 되네요!😲

---

의견은 언제든 댓글로 남겨주세요. 🙂