우리가 혼자서 작업할 때와는 다르게 여러 사람과 함께 공동으로 작업할 때에는 코드에 통일성이 있으면 좋다. 예를 들어 한 개발자 A는 큰 따옴표와 세미콜론은 찍는 반면, 개발자 B는 A와는 다르게 작은 다옴표와 세미콜론을 찍는다. 허나, 개발자 C는 작은다옴표와 세미콜론을 찍지 않는다. 이 세 개발자가 쓴 코드를 보면 코드들이 엉망진창일것이다. 어떻게 하면 깨끗한 코드를 쓸 수 있을까..?

Prettier

그 첫 번째 답으로 prettier을 손에 꼽을 수 있다. 우리가 프로젝트 루트 폴더에 .prettierrc 라는 파일과 함께 안에 JSON형식의 규칙들을 정하고, 애디터에 prettier이라는 플러그인을 설치하면 끝이다. 이렇게 하면, 아무리 많은 개발자라고 해도 파일을 저장 함과 동시에 우리의 코드들을 규칙에 맞게 알아서 변환을 해준다. 한번 사용해보자

우리는 세미콜론과 작은따옴표를 사용하고 싶다. 그러기 위해서는 먼저, .prettierrc 파일을 만든다. 이후, 아래와 같이 입력하자.

{
  "semi": true,
  "singleQuote": true
}

이렇게만 적어줘도 개발자들은 본인은 의도 하지는 않았지만 자연스럽게 코드가 세미콜론과 작은따옴표로 바뀔것이다. 만약 저장과 함께 코드를 자동으로 바뀌고 싶다면, VSCode의 경우에는 설정에서 FormatOnSave를 체크해주면 된다.

ESLint

이제 한번 ESLint에 다해서 알아보자. ESLint는 우리가 코드를 조금 더 확실하게 짤 수 있도록 도와준다. 예를 들어서, 우리가 사용하지 않은 변수나 상수를 캐치하여 오류로 내뿜게 할 수도 있고, 경고로 내뿜게 할 수도 있다. 이런식으로 우리가 규칙을 적어서 코드를 조금 더 통일성 있게 짤 수 있도록 해준다. ESLint를 사용하는 방법은 Prettier과 같다. 

1. 프로젝트 루트 폴더에 .eslintrc.json 파일을 만든다
2. 이후, 규칙, ESLint 플러그인, parserOption 등을 넣어준다
3. IDE의 플러그인 중 ESLint플러그인을 설치한다

이렇게 사용하면 우리는 조금 더 엄격하게 코드를 작성할 수 있게 된다

타입스크립트에 적용하기

이러한 prettier과 ESLint를 타입스크립트에서 사용해보자. 원래 ESLint는 자바스크립트용이다. 타입스크립트에는 tslint라도 또 따로 존재가 한다. 하지만, 이번에 tslint에서 업데이트를 중지한다고 하여, 우리는 ESLint를 사용하는 방법을 알아볼것이다

먼저, .prettierrc 파일을 생성하고, 아래과 같이 규칙을 써주자.

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2
}

이런식으로 써 주면, 되겠다. 이제, 한번 ESLint 파일을 생성해보자. 근데, 우리가 타입스크립트에서 ESLint를 사용하려면 몇가지 라이브러리들의 설치가 필요하다. 먼저, 우리가 설치할 라이브러리들은 아래와 같다. 

• @typescript-eslint/eslint-plugin : ESLint에서 타입스크립트를 사용할 수 있도록 도와준다
• @typescript-eslint/parser : ESLint에서 타입스크립트를 사용할 수 있도록 하는 parser이다
• eslint-config-prettier : eslint와 prettier을 함께 사용하려면 필요하다
• eslint-plugin-prettier : eslint와 prettier을 함께 사용하려면 필요하다
• eslint : eslint를 사용하려면 요구된다
• prettier: prettier을 사용하려면 요구된다

yarn add @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-prettier eslint -D

or

npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-prettier eslint

이러한 형식으로 설치를 해주면 되겠다. 본인이 yarn을 사용하고 있다면 위에것을, npm을 사용하고 있다면 아래것을 입력해주면 되겠다. 설치가 다 되면, 이제 .eslintrc 파일을 만들자. 그리고, 아래와 같이 쓰자.

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module"
  },
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "no-unused-vars": "warn"
  }
}

위와 같이 써주면 된다. 위와 같이 써 줬으면, 이제 우리가 사용 하지 않은 변수가 있을 시에는, ESLint에서 경고를 줄 것이다. 

오늘은 이와같이 타입스크립트에서 ESLint와 Prettier을 사용하는 방법에 대해서 알아보았다.

본 포스팅에서 사용된 코드는 여기에서 확인하실 수 있습니다