[Typescript] 타입 스크립트 프로젝트에 ESLint와 Prettier 적용하기

Typescript 코드를 Linting 할 때 선택할 수 있는 두 가지 도구가 있습니다. 바로 TSLint와 ESLint.

TSLint는 TypeScript에만 사용할 수 있는 린터이며, ESLint는 JavaScript와 TypeScript를 모두 지원합니다.

 

마이크로 소프트 타입스크립트 팀에서는 TSLint가 프로젝트 성능에 영향을 미칠 수 있는 몇 가지 아키텍처적인 문제를 발견하여 ESLint 사용을 권고하고 있습니다.

 

ESLint 설정하기

먼저, ESLint 설정에 필요한 패키지들을 설치하도록 하겠습니다.

  yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev

* create-react-app을 사용하여 프로젝트를 구성하는 경우 ESLint가 이미 dependency에 포함되어 있음으로 따로 설치할 필요가 없습니다.

 

eslint: ESLint linting 코어 라이브러리

@typescript-eslint/parser: ESLint가 TypeScript 코드를 린트하도록 허용하는 파서

@typescript-eslint/eslint-plugin: Typescript 고유의 규칙을 포함하는 플러그인

 

다음으로, ESLint 설정을 위해 루트 디렉터리에 .eslintrc.js 파일을 생성합니다.

아래 코드는 샘플 구성입니다.

  module.exports = {
    parser: "@typescript-eslint/parser", // ESLint 파서를 지정합니다
    parserOptions: {
      ecmaVersion: 2020, // 최신 ECMAScript 기능들이 파싱되도록 허용
      sourceType: "module" // imports 사용을 허용합니다
    },
    extends: [
      "plugin: @typescript-eslint/recommended" // @typescript-eslint/eslint-plugin 권장하는 규칙을 사용합니다.
    ],
    rules: {
      // ESLint 규칙을 지정합니다.
      // e.g. "@typescript-eslint/explicit-function-return-type": "off",
    }
  };

React + TypeScript를 사용하는 경우 eslint-plugin-react 패키지를 설치해야하며 아래와 같이 구성 파일을 수정합니다.

  module.exports = {
    parser: "@typescript-eslint/parser", // ESLint 파서를 지정
    parserOptions: {
      ecmaVersion: 2020, // 최신 ECMAScript 기능들이 파싱되도록 허용
      sourceType: "module" // imports 사용을 허용
  +   ecmaFeatures: {
  +     jsx: true // JS 파싱 허용
  +   }
    },
  +  settings: {
  +   react: {
  +     version: "detect" // eslint-plugin-react를 통해 사용할 리액트 버전을 자동 감시
  +   }
  + },
    extends: [
  +   "plugin:react/recommended", // @eslint-plugin-react가 권장하는 규칙을 사용
      "plugin: @typescript-eslint/recommended" // @typescript-eslint/eslint-plugin 권장하는 규칙을 사용
    ],
    rules: {
      // ESLint 규칙을 지정합니다.
      // e.g. "@typescript-eslint/explicit-function-return-type": "off",
    }
  };

Prettier에 추가하기

Prettier를 추가하기 위하여 아래 패키지를 다운로드합니다.

  yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev 

prettier: prettier 코어 패키지

eslint-config-prettier: prettier와 충돌할 수 있는 ESLint 규칙을 비활성화해주는 패키지

eslint-plugin-prettier: ESLint 규칙으로 prettier를 실행하기 위한 패키지

 

eslint 세팅을 위해 .eslintrc.js 파일을 생성한 것 처럼 .prettierrc.js 파일을 프로젝트 루트 디렉터리에 생성합니다.

  module.exports = {
    semi: true,
    trailingComma: "all",
    singleQuote: true,
    printWidth: 120,
    tabWidth: 4
  };

다음으로, .eslintrc.js 파일 업데이트가 필요합니다

  module.exports = {
    parser: "@typescript-eslint/parser", // ESLint 파서를 지정
    parserOptions: {
      ecmaVersion: 2020, // 최신 ECMAScript 기능들이 파싱되도록 허용
      sourceType: "module" // imports 사용을 허용
      ecmaFeatures: {
        jsx: true // JS 파싱 허용
      }
    },
     settings: {
      react: {
        version: "detect" // eslint-plugin-react를 통해 사용할 리액트 버전을 자동 감시
      }
    },
    extends: [
      "plugin:react/recommended", // @eslint-plugin-react가 권장하는 규칙을 사용
      "plugin: @typescript-eslint/recommended" // @typescript-eslint/eslint-plugin 권장하는 규칙을 사용
  +   "prettier/@typescript-eslint", // prettier와 충돌하는 ESLint 규칙을 비활성화합니다.
  +   "plugin:prettier/recommended" // eslint-plugin-prettier, eslint-config-prettier를 활성화합니다. prettier 오류가 ESLint 오류로 표시됩니다. 이 옵션은 항상 extends의 마지막 인덱스에 위치시켜야 합니다.
    ],
    rules: {
      // ESLint 규칙을 지정합니다.
      // e.g. "@typescript-eslint/explicit-function-return-type": "off",
    }
  };

* plugin:prettier/recommended 옵션은 항상 extends 배열의 마지막 인덱스에 위치시켜야 합니다.