TSLint 에서 ESLint 로 이사하기

TSLint 를 ESLint 로 이사하는 와중 배운 바를 정리해보고자 한다.

동료들과 작업을 할때 주로 Typescript 를 사용하고 있다.

동료들이 읽기 좋은 코드를 위해 코드 컨벤션을 맞출 필요가 있었는데, 자연스럽게 TSLint 와 Prettier 를 도입하게 되었다.

TSLint 는 TypeScript 코드 를 가독성 및 오류를 미리 검사하는 정적 분석 도구이다.

Prettier 는 분석된 도구를 이용해서 정해놓은 규칙에 맞게 자동으로 정렬해서 가독성을 높이고 코드 스타일을 통일할 수 있다.

Webstom 이나 VSCode 에서 TSLint 와 Prettier 가 Plugin 형태로 지원되기 때문에, 해당 도구를 이용해서 쉽게 작업 할 수 있다.

그런데 TSLint 가 2019 년부터 업데이트가 중단된 소식을 듣게 되었다.

https://github.com/palantir/tslint/issues/4534

중단한 이유는 관련 블로그 를 통해 자세히 설명하고 있다.

Typescript 는 순수 Javascript 로 작업 하여도 문제가 없을 정도의 호환성을 보장한다.

하지만 TSLint 는 순수 Javascript 코드를 Linting 하는데, ESLint 보다 효과적이 못한다고 한다.

때문에 기존에 사용하던, TSLint 를 ESLint 로 변환을 시도하게 되었다.

TSLint 에서 ESLint 로 마이그레이션 삽질

tslint-to-eslint-config 를 이용하면 ESLint 로 바로 마이그레이션 할 수 있다.

npx tslint-to-eslint-config

tslint-to-eslint-config 를 사용 하려면, node_module 에 typescript 와 tslint 이 설치되어 있어야 한다.

tslint-to-eslint-config 는 TSLint 와 TSConfig 파일을 읽어, 이를 .eslintrc.js 로 변환한다.

.eslintrc.js 는 ESLint 에서 사용하는 설정 파일이다.

npm install --save-dev eslint
./node_modules/.bin/eslint index.ts

변환된 설정으로, ESLint 를 실행하면 에러가 나오는데, eslint 에서 typescript 를 사용하기 위한 몇가지 툴이 필요하다.

npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

@typescript-eslint/parser 는 typescript 를 파싱하기 위해 쓰인다.

@typescript-eslint/tslint 는 여러 rule 들을 사용할 수 있다.

typescript-eslint 로 모든 기능들이 변환된것이 아니므로, tslint-to-eslint-config 로 변환된 파일의 rule 에는 문제가 있을만한 rule 이 추가되어 있을 수 있으므로 일부 커스텀이 필요하다.

지원하는 옵션들은 다음과 같다.

https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/ROADMAP.md

Webstrom 에 세팅하기

Webstorm 에는 ESLint 가 이미 포함되어 있다.

Webstorm > Preferences > Plugins > ESLint 를 설치할 수 있다.

설치후 재실행하면, ESLint Setting 가 추가된다.

아래 내용 세팅 하면 된다.

• Node interpreter 에 로컬의 Node 를 연결한다
• Path to eslint bint 에 현재 프로젝트의 eslint 인 ./node_modules/.bin/eslint 를 연결한다.
• ESLint config file path 에 생성한 .eslintrc.js 를 연결한다.

VSCode 에 세팅하기

VSCode 의 extension 에 ESLint 를 설치할 수 있다.

extension 로 설치한 ESLint 가 typescript 를 읽을 수 있게 settings.json 에 포함시켜야 한다.

// settings.json
"eslint.validate": [
  "javascript",
  "javascriptreact",
  "typescript",
  "typescriptreact",
]
```

@typescript-eslint/parser 와 JS file

만약 .eslintrc.js 에 tscofing.json 을 참조하라고 정의했다면, js 확장자를 가진 파일을 읽을때 에러가 발생할 수 있다.

// .eslintrc.js
"parserOptions": {
 "project": "tsconfig.json",
}
```

그럴경우

• .eslintignore 에 **/*.js 를 넣어 JS 파일을 무시하거나,
• parserOptions 옵션에서 project 세팅을 해제하거나,
• parser 를 babel-eslint 로 변경해보는 것을 고려해 볼 수 있다.

// .eslintrc.js
parser: 'babel-eslint',
plugins: ['babel']

마이그레이션 없이 eslint 새로 세팅하기

기존에 쓰던 환경을 그대로 쓰면 좋겠지만, 세팅이 100% 원하는 형태로 나오지 않을 수도 있다.

이럴 경우 옵션을 기존과 동일하게 문서를 보면서 하나씩 다시 맞추거나, 사용하면서 옵션을 추가해 나가는 방법이 있을 수 있다.

연습 삼아 새로 세팅해 보자.

• npm 으로 eslint 와 typescript 를 설치한다.
• eslint — init 으로 `.eslintrc.js` 를 세팅한다.

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

eslint 를 세팅할때 typescrip 를 포함한, 여러 옵션들을 선택 할 수 있다.

세팅이 완료되면, 6.6.0 버전 기준으로 아래와 같은 파일이 생성된다.

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

이제 코드를 작성하며, 룰을 원하는 형태로 추가하면되는데,

이미 많은 사람들이 사용하고 있는, prettier 나 airbnb 코드 스타일을 첨가해보자.

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

설치가 완료되면 .eslintrc.js 에 아래 내용을 추가하기만 하면 끝난다.

// .eslintrc.js
"extends": [
  "eslint:recommended",
  "plugin:@typescript-eslint/eslint-recommended"
  "prettier/@typescript-eslint",
  "plugin:prettier/recommended"
  "airbnb-base"
]

이제 간단한 Typescript 코드를 작성하고, 아래 명령어를 실행하면 코드가 자동으로 정리가 되는걸 볼 수 있다.

eslint '**/*.{ts}' --quiet --fix

하지만 명령어를 계속 치는건 귀찮으니, 이를 prettier 를 이용해서 자동으로 정리되게 해보자.

prettier 의 Pre-commit Hook 기능을 이용하면, git commit 이 될때 마다 대상 파일이 자동으로 lint 되게 세팅할 수 있다.

npx mrm lint-staged

위 명령을 실행하면, package.json 까지 자동으로 세팅 해준다.

// package.json
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.ts": [
    "eslint --fix",
    "git add"
  ]
}

마무리

Lint 는 개발하는데, 필수적인 요소는 아니다.

개인의 코드 스타일을 억제하고, 세팅에 따라 강제로 코드를 바꿔버려 짜증을 유발할 수 도 있다.

하지만 일관된 코드 스타일을 유지하는 것이 미래에 발생할 유지 보수 비용에 비하면 크지 않을 비용이라고 할 수 있을것 같다.

ESLint 로 세팅한 Recommand 는 반드시 지키기 보다는, 본인과 팀에 맞는 코드 스타일을 유지 할 수 있도록, 커뮤니케이션을 잘하고, 이를 적용해 나가는 것이 더욱 중요할 것 같다.