쉬운 5단계로 ESLint로 Typescript 설정하기

뒷이야기

2019년 6월, Microsoft 팀은 Linting을 처리하는 방식에 대한 정밀 검사가 포함된 TypeScript용 roadmap을 공유했습니다. 주요 변경 사항 중 하나는 TSLint의 사용 중단과 공식 린터로 ESLint를 채택한 것입니다.

이 기사에서는 새로운 프로젝트를 시작한다고 가정하지만 TSLint에서 ESLint로 마이그레이션하려는 경우 VSCode 팀에서 wonderful walkthrough .

이러한 변경으로 인해 ESLint 팀은 더 이상 typescript-eslint-parser 패키지를 유지 관리하지 않고 대신 recommend using @typescript-eslint/parser .

설정

시작하려면 프로젝트 디렉토리로 이동하여 다음 명령 시퀀스를 실행해야 합니다.

1) yarn init -y
이렇게 하면 권장되는 기본 구성을 사용하여 완전히 새로운project.json 파일이 생성됩니다.

2) yarn add -D typescript eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser
이것은 프로젝트에 통합된 typescript와 eslint를 얻기 위해 필요한 기본 패키지를 설치합니다.

3) touch .eslintrc.js
이렇게 하면 규칙, 옵션, 설정 등을 지정할 수 있는 eslint 구성 파일이 생성됩니다. 이 단계의 일부로 필요한 구성 옵션을 파일에 추가할 수 있습니다. airbnb 와 같은 기본 구성을 확장하는 경우 필요한 종속 항목도 설치해야 합니다. 몇 가지 예제 구성 파일을 제공했습니다here. 반응, 네이티브 반응 또는 노드를 선택한 프레임워크로 사용하는 경우 도움이 될 수 있습니다. 기본 구성을 사용하는 경우 피어 종속성도 설치해야 합니다.

4) 1단계에서 생성한 lint 파일에 package.json 스크립트를 추가합니다.

"scripts": {
  "lint": "eslint --ext .ts ."
}

5) 마지막으로 이전 스크립트yarn lint를 실행하여 .ts 및 .tsx 파일에서 오류 또는 경고를 검색합니다.

그거야! 이 빠른 참조 가이드가 다음 멋진 프로젝트를 시작하는 데 도움이 되었기를 바랍니다!

Quick Note: if you're extending the airbnb-typescript configuration, you may run across the following error:

Error: Error while loading rule '@typescript-eslint/dot-notation': You have used a rule which requires parserServices to be generated.

If this happens, you'll first need to add a .tsconfig file to your project, either manually or with the following command: npx tsc --init. Once that's been created, you'll want to update your .eslintrc.js file and include project: './tsconfig.json' under the parserOptions section.