Angular: TSLint에서 ESLint로 마이그레이션

Wikipedia에서 발췌:

Lint, or a linter, is a static code analysis tool used to flag programming errors, bugs, stylistic errors and suspicious constructs. The term originates from a Unix utility that examined C language source code.

TypeScript의 Linting

린터는 애플리케이션 개발에 큰 영향을 미칠 수 있습니다. 사용된 기술이 JavaScript 환경에서 나온 경우 특히 그렇습니다. JS 세계의 표준 linter는 ESLint이라는 도구입니다.

이에 반해 TSLint는 TypeScript 프로젝트를 위한 사실상의 표준 linting 도구로 부상했습니다. 그러나 TypeScript로 전환하는 개발자의 경험을 단순화하기 위해 ESLint는 TSLint 전용 기능을 통합하기 시작했습니다. 2019년에 TSLint는 새로운 기능의 적극적인 개발을 중단하고 사용자가 ESLint로 마이그레이션하도록 권장합니다. Palantir Blog에서 이 결정에 대한 자세한 내용을 읽을 수 있습니다.

기존 프로젝트의 마이그레이션 경로

GitHub RepoAngular ESLint에서 기존 Angular 프로젝트를 ESLint로 마이그레이션하는 작업을 간소화하는 데 필요한 모든 도구와 정보를 찾을 수 있습니다.

먼저 다음 명령을 사용하여 관련 패키지를 개발 종속성으로 추가해야 합니다.

ng add @angular-eslint/schematics

이제 convert-tslint-to-eslint 를 사용할 수 있습니다. 이렇게 하면 모든 TSLint 관련 구성이 제거됩니다. 또한 ESLint에 필요한 파일을 생성하고 NPM 스크립트의 참조 또는 tslint:disable와 같은 코드 주석을 변환합니다.

ng g @angular-eslint/schematics:convert-tslint-to-eslint

그게 다야! 이제 다음 명령줄을 실행하여 ESLint를 실행할 수 있습니다.

npm run lint

코드 편집기 지원

ESLint에는 다양한 개발 도구에 대한 다양한 통합 기능이 있습니다. ESLint user guide에서 전체 목록을 찾을 수 있습니다.

ESLint를 VS Code에 통합하려면 다음과 같은 훌륭한 플러그인을 설치할 수 있습니다. 음...ESLint (dbaeumer.vscode-eslint)

옵션이지만 그럼에도 불구하고 흥미로운 LintLens (ghmcadams.lintlens)을 설치하는 것이 좋습니다. .eslintrc.json 파일을 편집하는 동안 구성된 Linting 규칙에 대한 추가 정보를 직접 제공합니다.

포장이야

그리고 이것이 TSLint에서 ESLint로 기존 Angular 애플리케이션을 마이그레이션하는 데 필요한 전부입니다. 이 게시물이 누군가에게 도움이 되기를 바랍니다. 원하는 경우 공유해 주세요!