TSLint에서 ESLint로 마이그레이션

TSLint는 과거에 권장되던 린터였지만, 현재 TSLint는 더 이상 사용되지 않으며 ESLint가 그 역할을 이어받고 있습니다. 이 문서는 TSLint에서 ESLint로 마이그레이션하는 데 도움을 줄 것입니다.

ESLint: 설치

ESLint를 설치해야 합니다. ESLint는 TypeScript를 네이티브로 지원하지 않으므로, eslint-typescript-support도 함께 설치해야 합니다.

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

또는 yarn을 패키지 관리자로 사용하는 경우

yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev

위 명령은 ESLint를 설치하고, ESLint가 TypeScript를 이해하도록 하는 파서와 TypeScript 관련 규칙을 추가합니다.

이제 실제 마이그레이션을 더 쉽게 하려면 tslint-to-eslint-config 유틸리티를 실행하세요. 이 도구는 TSLint 구성을 가져와서 가장 "유사한" ESLint 구성을 생성합니다.

npx tslint-to-eslint-config

이 명령은 마이그레이션을 수행하기 위해 유틸리티를 다운로드하여 실행합니다. 추가 옵션은 유틸리티의 사용 가이드를 확인하세요.

이제 새로운 .eslintrc.js 파일, 로그 파일(tslint-to-eslint-config.log), 그리고 아마도 .vscode/settings.json과 같은 다른 파일의 변경 사항이 있을 것입니다. 변경 사항, 특히 기존 파일에 대한 변경 사항을 주의 깊게 검토하고 로그 파일을 확인하세요.

ESLint: 구성

.eslintrc.js 파일은 일반적으로 시작하는 데 충분하지만, parserOptions.project 속성이 여전히 tsconfig.json 파일로 설정되어 있을 가능성이 높습니다. 이는 ESLint 규칙이 의미론적 정보를 사용할 수 있음을 의미합니다. 예를 들어, 이 변수가 문자열인지 숫자 배열인지와 같은 정보입니다. 이 구성은 강력한 규칙을 활성화하지만 ESLint가 계산하는 데 훨씬 더 오래 걸리게 합니다. 확장 프로그램의 기본 규칙은 의미론적 정보를 요구하지 않으며, 의미론적 정보를 요구하는 규칙을 추가하지 않았다면 parserOptions.project 속성을 제거하는 것이 좋습니다.

ESLint: 실행

이제 ESLint를 실행할 준비가 되었습니다. 하지만 그 전에 TSLint를 비활성화하는 것이 좋습니다. 이렇게 하려면 확장 보기(Extensions view)를 열고 TSLint 확장의 컨텍스트 메뉴에서 **비활성화(Disable)**를 선택하세요.

이제 린팅할 시간입니다! 이 명령을 사용하세요: eslint -c .eslintrc.js --ext .ts <mySrcFolder> (ESLint에게 TypeScript 파일을 보도록 지시하는 --ext .ts 옵션에 유의하세요). 이 명령을 package.json 파일의 scripts 섹션에 넣는 것을 권장합니다. 다음과 같이 할 수 있습니다.

"lint": "eslint -c .eslintrc.js --ext .ts <mySrcFolder>"

ESLint를 Visual Studio Code와 통합하려면 다음 단계를 따르세요.

ESLint 확장을 설치합니다.
Tasks: Configure Task 명령을 통해 작업을 생성하고 npm: lint를 선택합니다.
결과로 생성된 tasks.json 파일에서 문제 표시기(problem matcher)를 $eslint-stylish로 구성합니다.

팁: ESLint는 때때로 "더 정확하게" 동작하며, 이전에는 보지 못했던 경고(예: 누락된 세미콜론)를 볼 수도 있습니다. ESLint가 자동으로 수정하도록 --fix 옵션을 사용해 보세요.

TSLint: 제거

축하합니다. 이제 작동하는 ESLint 설정이 되었을 것입니다. 이제 정리할 차례입니다.

TSLint 제거는 프로젝트에 따라 다르지만, 일반적으로 다음과 같은 단계가 있습니다.

.vscode/extensions.json을 업데이트하여 ESLint 확장을 권장하고 TSLint는 더 이상 권장하지 않도록 합니다.
```
"recommendations": [
  "dbaeumer.vscode-eslint"
]
```
tslint.json 파일을 제거합니다.
package.json 파일에서 tslint에 대한 의존성을 제거합니다.
npm uninstall tslint 명령으로 TSLint를 제거합니다.

12/10/2025