jsts

TypeScript ESLint 적용하기 (+ Airbnb)

eslint, typescript-eslint

토이 프로젝트 같은 경우 혼자 작업하기 때문에 코드 스타일이 거의 일관되지만
협업을 하면 모두 각자의 코딩 취향이 있기 때문에 코드 스타일이 정해지지 않았다면, 코드에 개발자의 개성이 가득 남을 것이다.
개인적으로 팀 프로젝트엔 개발자의 개성이 적게 들어가고, 일관화되는 편이 좋다고 생각하기 때문에 linting tool을 사용하는 것이 좋다고 생각한다.

그런 의미로 이번에 Typescript에 lint를 적용하기 위해 TypeScript ESLint를 설정하는 법에 대해 알아보겠다.
굳이 ESLint를 사용하지 않고 TSLint라는 선택지도 있지만 TSLint는 곧 deprecated 될 예정이기 때문에 TSLint는 고려하지 않았다.
(https://github.com/typescript-eslint/typescript-eslint#what-about-tslint)
그리고 여기에 Airbnb의 code style guide를 끼얹어보겠다.

1) init project

프로젝트 디렉토리를 생성한 후 package.json 파일과 tsconfig.json 파일을 생성한다.

1
2
$ npm init -y # package.json
$ tsc -init # tsconfig.json

2) install packages

npm을 통해 TypeScript와 ESLint, TypeScript-ESLint 관련 package를 설치한다.

1
2
3
4
5
6
7
8
# TypeScript
$ npm i -D typescript

# ESLint packages
$ npm i -D eslint eslint-config-airbnb-base eslint-plugin-import

# TypeScript ESLint packages
$ npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser

3) create ESLint config file

ESLint 설정을 위해 .eslintrc.js 파일을 생성하여 다음과 같이 설정을 한다.

1
2
3
4
5
6
7
8
9
10
11
// .eslintrc.js
module.exports = {
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint"],
  extends: [
    // Airbnb style guide 적용
    "airbnb-base",
    // TypeScript ESLint recommanded style 적용
    "plugin:@typescript-eslint/eslint-recommended"
  ]
};

4) add linting scripts

linting을 위한 script를 package.json의 scripts에 추가한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
  "name": "ts-eslint",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    // linting scripts
    "lint": "eslint src/**/*.ts",
    "lint:fix": "eslint --fix src/**/*.ts"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.3.3",
    "@typescript-eslint/parser": "^2.3.3",
    "eslint": "^6.5.1",
    "eslint-config-airbnb-base": "^14.0.0",
    "eslint-plugin-import": "^2.18.2",
    "typescript": "^3.6.3"
  }
}

5) create ts file for linting test

이제 세팅이 끝났으니 Typescript-ESLint가 잘 적용되었는지 확인하기 위한 ts 파일을 만들자.

1
2
$ mkdir src
$ touch src/main.ts
1
2
3
4
5
6
// src/main.ts
function hello() {
    console.log('World!');
}

hello();

6-1) run linting script

이제 lint script를 실행시켜 확인해보자.
위 코드는 indent가 4이기 때문에 분명히 이 부분을 ESLint에서 잡아낼 것이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
$ npm run lint

> eslint-ts@1.0.0 lint /Users/son/tmp/eslint-ts
> eslint src/**/*.ts


/Users/devson/tmp/ts-eslint/src/main.ts
  2:1  error    Expected indentation of 2 spaces but found 4   indent
  2:5  warning  Unexpected console statement                   no-console
  5:9  error    Newline required at end of file but not found  eol-last

✖ 3 problems (2 errors, 1 warning)
  2 errors and 0 warnings potentially fixable with the `--fix` option.

로그를 확인해보면 indent 오류는 확실하게 예상했는데,
파일의 마지막에 새로운 줄을 하나 두어야 한다고 error가 떴다.
이런식으로 linting tool을 사용하면 본인이 미처 체크하지 못한 오류를 잡을 수 있다.

6-2) run linting and fixing script

eslint의 --fix 옵션을 추가하면 소스코드가 .eslintrc.js에 설정한 것에 맞춰 수정된다.
scripts에 추가한 lint:fix script를 실행시켜 확인해보자.

1
2
3
4
5
6
7
8
9
10
$ npm run lint:fix

> eslint-ts@1.0.0 lint:fix /Users/son/tmp/eslint-ts
> eslint --fix src/**/*.ts


/Users/devson/tmp/ts-eslint/src/main.ts
  2:3  warning  Unexpected console statement  no-console

✖ 1 problem (0 errors, 1 warning)

이제 src/main.ts 파일을 확인하면 아래와 같이
indet가 2로 변경되고, 마지막 줄에 새로운 줄이 생긴 것을 확인할 수 있다.

1
2
3
4
5
6
// src/main.ts
function hello() {
  console.log('World!');
}

hello();

참고

Share