[TS] TSLint & Prettier

안녕하세요 hp 입니다:)

오늘은 저번 프로젝트에서는 JS를 이용하여 ESLint와 Prettier를 설정해봤다면 오늘은 TS를 이용해서 설정하는 방법에 대해서 알아보겠습니다.
지난 포스팅에 자세하게 나와있기 때문에 중복되는 부분은 최대한 줄여서 작성하도록 하겠습니다.

⚒️ 사용법

지난 포스팅에서 Lint와 Prettier의 개념을 살펴봤기 때문에 생략하고 바로 순서와 함께 사용법을 알아보도록 하겠습니다.
순서는 간략하게 아래와 같습니다.

1. ESLInt 적용을 위한 패키지 설치
2. Prettier 설정을 위한 패키지 설치

ESLint 모듈 설치

npm i -D eslint typescript eslint-plugin-react @typescript-eslint/parser @typescript-eslint/eslint-plugin

ESLint는 기본적으로 노드 모듈을 이용합니다.

• eslint-plugin-react는 React 문법 규칙을 사용
• typescript-eslint/parser는 타입스크립트 파서를 사용
• typescript-eslint/eslint-plugin는 typescript-eslint의 규칙들을 사용

.eslintrc.json 파일을 생성후에 아래와 같은 설정을 진행합니다.

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["react", "@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
  ],
  "rules": {
    "@typescript-eslint/explicit-module-boundary-types": "off"
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

ESLint에서는 자주 사용하는 규칙들을 확장 모듈로 제공합니다.
ESLInt recommended 규칙
추가적으로 추가할 규칙 사항들은 rules 밑에 적용시켜줍니다.

Prettier 모듈 설치

npm i -D prettier eslint-config-prettier eslint-plugin-prettier

ESLint와 Prettier는 코드를 포맷팅해주는 도구로써 서로 충돌할 수 있기 때문에 서로 충돌하는 옵션이 있으면 Prettier를 사용하게 설정해주는것이 바로 eslint-config-prettier입니다.

따라서 위와 같이 모듈 설치를 진행한 후에 eslintrc.json에 가서 plugin과 extends에 아래와 같이 추가해줍니다.

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["react", "@typescript-eslint", "prettier"],
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "@typescript-eslint/explicit-module-boundary-types": "off"
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

마지막으로 .prettierrc 파일을 생성한 후에 아래와 같이 설정해줍니다.

{
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "all",
  "tabWidth": 2,
  "useTabs": false,
  "semi": true
}

prettier에 대한 구체적인 설정도 공식문서에 자세하게 나와있으니까 참고해보시면 좋을 것 같습니다.

끝까지 읽어주셔서 감사합니다. 😃

📌 참고

ESLint 공식문서
Prettier 공식문서