린팅

❗ TSLint는 더 이상 사용되지 않습니다. 대신 ESLint를 활용합니다.

TSLint 설치

TSLint는 린팅 도구로 TypeScript 코드의 가독성, 유지보수 및 오류를 검사 등을 분석하여 결과를 안내합니다. 설치 및 명령어 사용 방법은 다음과 같습니다. 보다 자세한 사용법은 TSLint command-line interface을 살펴보세요.

# TSLint 개발 모듈 로컬 설치
$ npm i -D tslint

# TSLint 설정 파일 생성
$ tslint --init

# TypeScript 파일 린팅 설정
$ tslint -c tslint.json 'src/**/*.ts'

TSLint 설정

tslint --init 명령으로 생성된 파일의 rules 옵션에 새로운 규칙을 추가하려면 TSLint core rules를 참고한 후, 필요한 규칙을 적용할 수 있습니다.

예를 들어 var 키워드 사용을 허용하지 않도록 설정하고, 일반적으로 작은 따옴표(')를 사용하지만 JSX에서는 큰 따옴표(")를 사용하도록 설정하고, 파일 마지막에 추가 줄이 생기도록 설정할 수 있습니다.

{
  "defaultSeverity": "error",
  "extends": [
    "tslint:recommended"
  ],
  "jsRules": {},
  "rules": {
    "no-var-keyword": true,
    "quotemark": [true, "single", "jsx-double"],
    "eofline": true
  },
  "rulesDirectory": []
}

Airbnb 스타일 가이드

앞서 다룬 규칙 추가 설정을 사용자가 일일이 하는 것은 매우 번거로운 일이므로, 검증된 스타일 가이드를 사용하고 일부 규칙을 바꾸는 것이 보다 손쉽습니다. 예를 들어 검증된 Airbnb 스타일을 설정한 후 일부 규칙을 변경해 사용할 수 있습니다.

스타일 가이드 설치

npm i tslint-config-airbnb

tslint.json 설정

{
  "defaultSeverity": "error",
  "extends": ["tslint-config-airbnb"],
  "jsRules": {},
  "rules": {
    "no-var-keyword": true,
    "quotemark": [true, "single", "jsx-double"],
    "eofline": true
  },
  "rulesDirectory": []
}

TSLint를 직접 구성하기 보다, 에디터에 확장을 설치하면 보다 손쉽게 린팅 할 수 있습니다.

에디터 통합 익스텐션

TSLint를 에디터에 통합하는 다양한 익스텐션 및 라이브러리를 사용할 수 있습니다.

• TSLint - Visual Studio Code

• TSLint - Sublime Text

• TSLint - WebStorm

익스텐션 목록에 나열되지 않은 에디터를 사용하고 있다면? Third-Party Tools 페이지에서 해당 에디터가 TSLint 익스텐션을 제공하는지 살펴볼 수 있습니다.