[TypeScript] typescript-eslint의 이해와 사용

 

typescript-eslint?

typescript-eslint란 간단하게 말하자면 TypeScript코드를 린팅해주는 도구이다. ESLint와 TypeScript는 각자의 parser를 이용해 서로 다른 AST(Abstract Syntax Tree)를 만들어 내는데, 이러한 다른 AST들 때문에 생겨나는 문제점 때문에 생겨난 것이 typescript-eslint이고 이로 인해 ESLint와 TypeScript를 함께 사용할 수 있게 된 것이다.

 

TSLint

TSLint는 위에서 언급한 TypeScript AST를 사용하여 린팅을 해주는 도구이다. TSLint의 장점은 TypeScript AST를 이용하기 때문에 따로 린팅을 위한 parser를 구현하지 않아도 된다는 것이고, 단점은 ESLint parser와 호환이 되지 않고 ESLint의 규칙들을 재사용할 수 없어 다시 구현을 해야하는 것이다. 현재는 typescript-eslint를 지원하기 위해 deprecated된 상태이다.

 

즉, TypeScript코드를 parsing하면서, ESLint AST와도 호환이 가능한 역할을 하는 parser를 갖고있는 것이 typescript-eslint라고 생각하면 된다.

 

TypeScript AST

 

@typescript-eslint/parser

TypeScript코드에 대한 AST생성

 

@typescript-eslint/typescript-estree

해당 AST를 ESLint가 예상하는 형식으로 변환

 

@typescript-eslint/eslint-plugin

typescript-eslint의 규칙들을 사용할 수 있게 해준다

 

@typescript-eslint/eslint-plugin-tslint

ESLint에서 TSLint를 꼭 사용해야 할 경우 두 개의 린터를 같이 사용할 수 있게 해준다 

 

@typescript-eslint/tslint-to-eslint-config

TSLint에서 ESLint로 마이그레이션 할 때 쉽게 할 수 있도록 도와준다

 

 

사용

먼저 필요한 패키지들을 설치한다.

 

$ yarn add -D eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin
$ npm i --save-dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin

 

.eslintrc.js파일을 생성하고 아래와 같이 설정해준다.

 

// .eslintrc.js

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  plugins: [
    '@typescript-eslint',
  ],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
  ],
};

 

parser옵션은 ESLint에 어떠한 parser를 사용할지 알려주는 옵션이다. 위와 같이 작성함으로 인해 ESLint가 TypeScript문법을 이해할 수 있도록 해준다.

plugins옵션은 위에서 언급한 것과 같이 typescript-eslint에서 제공하는 규칙들을 사용할 수 있게 해준다.

extends에서는 어떤 규칙들과 설정으로 ESLint를 사용할지 명시한다. 위와 같이 작성하면 default값으로 적용이 되고 유명한 에어비엔비 설정을 적용할 수도 있다. 또한 prettier설정도 이 옵션에 추가한다.

 

다음으로 .eslintignore파일을 생성하고 ESLint를 적용하지 않을 파일이나 폴더를 적어준다.

 

// .eslintignore

node_modules
dist

 

위 설정들을 마쳤으면 실제로 린팅을 해보자.

 

$ yarn eslint . --ext .js,.jsx,.ts,.tsx
$ npx eslint . --ext .js,.jsx,.ts,.tsx

 

 

 

 

 

참고

• github.com/typescript-eslint/typescript-eslint#typescript-eslint