[2019.07.11] React + TypeScript에 TSLint 적용시키기

# React + Typescript + Webpack 환경 세팅하기

[2019.07.11] React + TypeScript + Webpack 환경 설정

 

 

이번에는 TSLint를 적용시켜, Typescript의 코드 스타일을 맞춰보도록 하자.

# VSCode TSlint Plugin 설치

vscode plugin에 들어가 TSLint를 설치한다.  

 

# TSlint 설치

TSlint 모듈을 설치한다.

$ npm i -g tslint

 

# TSlint 설정하기

TSlint 설치 후, tslint config파일을 생성하기 위해, 아래와 같은 명령어를 입력한다.

$ tslint --init

그러면 해당 경로에 tslint.json 파일이 생성된다. 

'tslint.json' 파일

{
  "defaultSeverity": "error",
  "extends": ["tslint:recommended"],
  "jsRules": {},
  "rules": {},
  "rulesDirectory": []
}

해당 파일에서 typscript 코딩 스타일 룰을 적용시킬 수 있다.

하나의 예시로, 세미콜론을 빠트렸을때, 경고 표시를 해주는 룰을 적용시켜보자.

{
  "defaultSeverity": "error",
  "extends": ["tslint:recommended"],
  "jsRules": {},
  "rules": {
    "semicolon": true
  },
  "rulesDirectory": []
}

rules라는 하위 요소에, 위와 같이 적용을 시키면, 세미콜론을 빠트렸을 때, 해당 코드가 틀린문법으로 인식하게 된다.

# Prettier 설치

코드스타일에 맞지 않는 코드를 체크하는 TSlint와, 틀린부분을 자동으로 고쳐주는 Prettier를 함께 사용할 수 있도록 설정해보자.

$ npm i tslint-config-prettier

위 모듈을 설치 후, tslint.json파일에 prettier 관련 설정을 한다.

'tslint.json' 파일

{
  "defaultSeverity": "error",
  "extends": ["tslint:recommended", "tslint-config-prettier"],
  "jsRules": {},
  "rules": {
    "semicolon": true
  },
  "rulesDirectory": []
}

 

prettier설정이 끝났다.

세미콜론을 빠트리고 저장을 하면, 자동으로 세미콜론이 생겨서 저장되는 것을 확인할 수 있다.