[typescript React] ESlint config setting

TS의 기본적인 문법을 공부하고서, 자!! 이제 React에 적용해보자!! ....두둥.. error..

TS를 사용하기 위해서 설치한 TSlint에서 날 통과 시켜주지 않는 것이였다..

이것 저것.. 검색을 해본 결과.. 정확하고 속시원하게 알려주는 내용은 없었다. 물론, 내가 못 찾았거나 보고도 이해 못한 내용이였거니 생각하니... 더 답답했다.

그러던 중, ESlint까지 내용이 이어졌는데.. typescript-ESlint Github 를 보고 잊지 않기 위해 끄적끄적...

먼저, typescript-ESlint Github에 따르면 TSlint는 2019년에 더이상 개발을 지원하지 않겠다고 선언했다고 한다. ESlint에서 TS를 지원하기 시작해서 불필요 하다고 생각했기 때문이다. 또한, typescrip 를 개발한 MS에서도 typescript-ESlint 를 적극 수용하겠다고도 한다.

그래서 여러 사이트에서 설치하라고 했던 TSlint를 과감하게 삭제하고 ESlint를 설치했다.

지금부터 typescript-ESlint Github에 나와있는 내용을 정리해 본다.

 

1.설치

$ 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

eslint, typescript 는 기본적으로 설치해주면 된다. 나머지 두 가지에 대해 알아보자.

@typescript-eslint/parser : TS로 입력한 값을 lint가 이해 하도록 변환해 주는 역할을 한다.

@typescript-eslint/eslint-plugin : lint에서 plugin을 사용 할 수 있도록 해준다.

 

2. 설정

설치가 완료되면 .eslintrc.js 파일을 생성해서 다음의 내용을 복붙 하라고 나와 있다.

많은 설정값과 plugin을 추가 할 수 있지만 정말 최소한의 설정을 넣은 것이라고 설명 되어 있다.

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

 정확한 내용은 아니지만 eslint를 제외하고 추가적으로 사용 해야하는 프로그램을 plugins 에 추가해주고 그에 대한 규칙을 extends 에 추가해 주는데 그 값을 권장값으로 설정해 주는 것 같다. 

 

3. eslintignore 생성

# don't ever lint node_modules
node_modules
# don't lint build output (make sure it's set to your correct build folder name)
dist
# don't lint nyc coverage output
coverage

.eslintignore 파일을 생성하고 eslint 가 적용되지 않을 내용을 추가해 준다.

 

4. lint 실행하기 

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

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

프로잭트의 루트에서 다음을 실행해서 적용가능한 확장자를 추가해주면 된다고 간단하게 나와있으나 실행 시 module를 찾을 수 없다는 에러가 나온다.. 이 부분은 조금 더 알아 보도록 하자.

 

5. 그 외

기본설정에서 추가적으로 config package 가 있다고 나와있고 plugin에 추가해서 사용이 가능하다고 한다.

//Airbnb's ESLint config 
eslint-config-airbnb-typescript.
//Standard
eslint-config-standard-with-typescript.

 지금까지의 내용은 아래 링크에서 나온 내용을 축약한 내용이고 정말 구동을 위한 최소한의 설정값이다.
더 자세한 사항은 직접 들어가서 보는 것을 추천한다. 아직 뒤에.. 더 많은 내용이 남아 있다.

 

typescript eslint github :
github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/README.md 

 

typescript eslint에서 가능한 설정값 예시:

github.com/typescript-eslint/typescript-eslint/blob/master/.eslintrc.js 

(위 링크는 typescript eslint github 의 내용을 따라가다 보면 자동으로 연결이 되겠지만, 혹시 찾지 못한 분들을 위해 남깁니다.)