# 린팅

{% hint style="danger" %}
❗ **TSLint는 더 이상 사용되지 않습니다.** 대신 [ESLint](https://eslint.org/)를 활용합니다.
{% endhint %}

## TSLint 설치 <a href="#install-tslint" id="install-tslint"></a>

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

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

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

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

## TSLint 설정

`tslint --init` 명령으로 생성된 파일의 `rules` 옵션에 새로운 규칙을 추가하려면 [TSLint core rules](https://palantir.github.io/tslint/rules/)를 참고한 후, 필요한 규칙을 적용할 수 있습니다.&#x20;

예를 들어 [`var` 키워드 사용을 허용하지 않도록 설정](https://palantir.github.io/tslint/rules/no-var-keyword/)하고, [일반적으로 작은 따옴표(`'`)를 사용하지만 JSX에서는 큰 따옴표(`"`)를 사용하도록 설정](https://palantir.github.io/tslint/rules/quotemark/)하고, [파일 마지막에 추가 줄이 생기도록 설정](https://palantir.github.io/tslint/rules/eofline/)할 수 있습니다.

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

### Airbnb 스타일 가이드

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

#### 스타일 가이드 설치

```bash
npm i tslint-config-airbnb
```

#### tslint.json 설정

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

{% hint style="info" %}
[TSLint를 직접 구성하기 보다, 에디터에 확장을 설치하면 보다 손쉽게 린팅 할 수 있습니다.](../ide-editors#visual-studio-code-extensions)
{% endhint %}

## 에디터 통합 익스텐션 <a href="#integration-editors" id="integration-editors"></a>

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

* [TSLint - Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=eg2.tslint)
* [TSLint - Sublime Text](https://packagecontrol.io/packages/SublimeLinter-tslint)
* [TSLint - WebStorm](https://www.jetbrains.com/help/webstorm/tslint.html)

{% hint style="info" %}
익스텐션 목록에 나열되지 않은 에디터를 사용하고 있다면? [Third-Party Tools](https://palantir.github.io/tslint/usage/third-party-tools/)  페이지에서 해당 에디터가 TSLint 익스텐션을 제공하는지 살펴볼 수 있습니다.
{% endhint %}
