TSLint에서 ESLint로

2019년을 끝으로 TSLint 개발은 끝난다.

2019-12-05

TSLint는 2019년이 끝

TSLint will be deprecated some time in 2019.

올해 초부터 공표했듯이 TSLint는 2019년을 끝으로 더는 사용되지 않는다. 마이그레이션은 꽤 귀찮은 일이지만 피할 수 없기에 12월이 되었으니 다시금 ESLint로 돌아가야 할 때가 된 것 같다.

tslint-to-eslint-config를 사용하면 마이그레이션을 할 수 있지만, 어차피 설정을 조금이라도 고쳐야 하고 한동안 안 써서 혹시나 변경되거나 추가된 API가 있을까 봐 TSLint를 지우고 ESLint를 설치했다.

Migration

먼저 TSLint 설정파일과 TSLint와 관련된 패키지는 모두 삭제 후 ESLint를 설치한다.

다음으로 ESLint 설정파일을 생성해주는 커맨드를 실행한다.

$ npm install -g eslint
$ eslint --init

VSCode를 주로 사용하는지라 IDE에서 linting 하려면 전역으로 설치해야 한다.

만약 프로젝트에서 실행하려면 아래와 같이 설치 후 실행하면 된다.

$ npm install --save-dev eslint
$ ./node_modules/.bin/eslint --init

그것도 아니라면 일회성으로 전역에서 실행시켜주는 npx를 사용하면 된다.

$ npx eslint --init

여러 질문을 거쳐 입맛에 맞게 생성된 초기 설정은 아래와 같다. (eslint 6.7.2)

{
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": [
    "plugin:react/recommended",
    "airbnb"
  ],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "@typescript-eslint"
  ],
  "rules": {
  }
}

과정의 마지막에 관련 패키지 설치를 묻는데 설치하도록 하자.

하지만 prettier는 포함이 안 되어 있는 관계로 prettier와 eslint를 위한 패키지들을 설치 후

$ npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

아래 설정을 추가하면 된다.

{
  ...
  "extends": [
    ...
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  ...
}

ESLint

여기까지 한 뒤 파일을 linting 해보니 난리가 나 있었다. 이제부터는 룰을 하나씩 잡아야했었는데 나의 최종 초기값은 아래와 같다.

{
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": [
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "airbnb",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint"],
  "rules": {
    "react/jsx-filename-extension": [
      2,
      { "extensions": [".js", ".jsx", ".ts", ".tsx"] }
    ],
    "react/prop-types": 0,
    "react/state-in-constructor": 0
  }
}

마치며

lint가 필수는 아니지만, 지금까지 lint를 사용함으로써 얻는 장점이 더 크다고 생각한다. 1인 개발이든 팀 개발이든 lint를 사용하여 더욱 높은 가독성과 여러 오류에서 벗어나는 게 좋지 않을까? (물론 다른 의견도 환영)