홈페이지>웹 디자인 튜토리얼>자바스크립트 튜토리얼

Angular에서 tslint를 eslint로 마이그레이션하는 방법에 대해 이야기해 보겠습니다.

저자：Eve Cole 업데이트 시간：2022-09-13 09:27:28
이 기사에서는 계속해서 Angle을 배우고, tslint와 eslint를 비교하고, Angular에서 tslint를 eslint로 마이그레이션하는 방법을 소개할 것입니다. 도움이 되기를 바랍니다.

VUE3.0을 빠르게 시작하는 방법: 입력 및 학습

안녕하세요 여러분, 최근 Angular가 12에서 13으로 업그레이드되었습니다. 공식에서는 Angular.json에서 tslint 구성을 자동으로 제거했으므로 공식 배열을 따르는 것이 가장 좋습니다. 그리고 eslint를 사용하세요. [추천 튜토리얼: "angular 튜토리얼"]

tslint 대 eslint

의 플러그인 11부터 eslint를 더 이상 사용하지 않으며
lint 유형 사용현재 상태
ts 구문 사양을 확인하는 데 사용되는tslint는 더 이상 유지되지 않습니다. Angular는
js/ts 코드 사양을 확인하기 위해여전히 유지됩니다. 유지보수 중 공식 권장

마이그레이션 방법

1. eslint 종속성을 설치하고 다음 명령을 실행합니다.

 @angular-eslint/schematics를 추가하세요.

실행 결과:

  • .eslintrc.json 파일은 루트에 자동으로 생성되며 기본적으로 @angular-eslint eslint 플러그인이 사용됩니다.
 {
  "루트": 사실,
  "패턴 무시": [
    "프로젝트/**/*"
  ],
  "재정의": [
    {
      "파일": [
        "*.ts"
      ],
      "파서 옵션": {
        "프로젝트": [
          "tsconfig.json"
        ],
        "createDefaultProgram": 참
      },
      "확장": [
        "플러그인:@angular-eslint/권장",
        "플러그인:@angular-eslint/템플릿/프로세스-인라인-템플릿"
      ],
      "규칙": {
        "@angular-eslint/directive-selector": [
          "오류",
          {
            "유형": "속성",
            "접두사": "앱",
            "style": "camelCase"
          }
        ],
        "@angular-eslint/comComponent-selector": [
          "오류",
          {
            "유형": "요소",
            "접두사": "앱",
            "style": "케밥 케이스"
          }
        ]
      }
    },
    {
      "파일": [
        "*.html"
      ],
      "확장": [
        "플러그인:@angular-eslint/템플릿/권장"
      ],
      "규칙": {}
    }
  ]
}
  • 다음과 같은 eslint 관련 cli 구성이 angle.json에 추가됩니다. 향후 ng 명령줄을 통해 lib 또는 애플리케이션을 생성하면 이 모듈 아래에 .eslintrc.json이 자동으로 생성됩니다.
 "cli": {
	    "defaultCollection": "@angular-eslint/schematics"
  }

2. tslint 관련 파일 또는 구성 제거 또는 교체

  • 루트 디렉터리 또는 모듈에서 tslint.json을 삭제합니다.
  • tslint 또는 typescript-tslint-plugin 등과 같은 tslint 관련 개발 종속성 패키지를 삭제합니다.
  • (있는 경우) tsconfig.json에서 tslint-plugin 관련 구성을 삭제합니다.

1.png

  • angular.json 아래의 tslint 구성(있는 경우)을 eslint로 변경합니다. 수동으로 수정해야 할 수도 있습니다.

원래 tslint 구성:

2.png

수정된 eslint 구성(예: projects/lint-test 디렉터리에서 lint를 실행하도록 구성됨):

3.png

3. 일부 코드나 파일의 eslint 검사를 일시적으로 꺼야 하는 경우

  • 해당 코드에 대한 eslint 검사를 일시적으로 끄려면 코드 위에 다음 주석을 추가하세요.
 /* eslint 비활성화 */
const some_un_used_var;
  • eslint 검사가 주석에 오류를 보고할 때 규칙을 추가하여 일시적으로 검사를 끄는 이유를 표시할 수 있습니다. 예를 들어, 다음 코드에서는 사용되지 않는 변수가 eslint에 의해 체크아웃되어 오류가 발생하는 것을 원하지 않습니다.
 /* eslint-disable @typescript-eslint/no-unused-vars */
const some_un_used_var;
  • 일부 파일의 eslint 검사를 꺼야 하는 경우 루트 아래에 .eslintignore 파일을 추가할 수 있습니다.
  • Lint 검사가 필요한 패턴은 .eslintrc에서 구성할 수 있습니다. (이 기사에서는 자세한 내용을 다루지 않습니다. 공식 소개입니다.)

4. 사용 가능 여부를 확인하세요.

린트 명령 실행

 NG 린트

성공적으로 실행되면 마이그레이션 완료를 축하합니다!

(선택 사항) 기타 지원 eslint 플러그인

  • eslint-plugin-deprecation: 코드가 더 이상 사용되지 않는지 확인
  • eslint-plugin-header: 파일 헤더 주석이 특정 규칙을 따르는지 확인합니다. (버전, 특허 확인 등에 사용할 수 있습니다.)
  • eslint-plugin-import: 가져오기 주소 철자 또는 이름 오류, 문법 등을 확인합니다.
  • eslint-plugin-prefer-arrow: 화살표 기능을 사용하여 유효성 검사
  • eslint-plugin-unicorn: js, ts 구문 관련 확인
  • eslint-plugin-jsdoc: 관련 문서
  • ...

.eslintrc.json(공식 문서)에서 구성할 수 있습니다.

(선택 사항) VS 코드 구성

eslint 플러그인 설치

4.png

VS 코드는 저장 시 eslint 관련 문제를 자동으로 수정합니다.

.vscode/settings.json에 설정

 "editor.codeActionsOnSave": { "source.fixAll.eslint": true }

또는 File->Preferences->Settings에서 onsave 설정을 검색하여 eslint 관련 설정을 찾으세요.

5.png

관련 기사