VScode에서 Typescript를 사용하여 Eslint를 설정하는 방법

소개하다.
만약 당신이 개발팀의 일원이었다면, 당신은 우리 모두가 서로 다른 코드 형식, 의미 기준을 가지고 있다는 것을 알 수 있을 것이다. (이것은 매우 좋다.)😅). 그러나, 당신들이 한 가지 일을 개발할 때, 엄격한 모델을 따르는 것은 매우 편리하다. 그러면 코드 라이브러리는 모든 물건의 혼합체가 아니다.
그러나 모든 개발자에게 하나의 모델에 익숙해지는 것은 매우 어렵고 효과가 없다. (우리는 서로 다른 스타일의 안내서 등을 사용하는 보조 프로젝트가 있기 때문이다.)

에스린이 구해줘!
Eslint는 개발자가 선택한 규칙에 따라 코드를 포맷하도록 하는 도구입니다.

E.g. rule: don't use semicolons in your code.

// The semicolon below would be underlined and showing error on hover
console.log("I shouldn't be using semicolons there");

따라서 모든 개발자의 코드에 세미콜론이 있으면 IDE/텍스트 편집기에서 오류가 발생하지만 어떤 이유로 오류/경고를 무시하고 변경 사항을 제출할 수도 있습니다.다행히도, eslint은 이 문제를 처리할 수 있고, 파일을 저장할 때 자동으로 오류를 복구할 수 있습니다.
불행하게도 개발자들은 아이디/텍스트 편집기를 사용해서 eslint를 사용할 준비가 되어 있지 않을 수도 있고, 오류를 보지 못할 수도 있지만, Google CI에서 실행될 eslint 스크립트를 만들 수 있습니다.이렇게 하면 우리는 형식이 정확한 코드만 병합할 수 있다.🙌

왜 타자를 칩니까?
너는 typescript를 들어 본 적이 있을 것이다. 이것은 기본적으로 유형이 있는javascript이다. (그러나 안에 아직도 많은 것이 있다.)그것은 코드에 또 다른 확정성을 증가시켰다.하지만 에스린트와 함께 일하기가 까다롭기 때문에 깊이 연구해 봅시다!

Visual Studio 코드 설정
우선, 우리는 편집 이해를 가르쳐야 한다.😄
그래서 우리는 설치this를 확장할 것이다.
설치 후, eslint extension에서 typescript 파일의 linting 오류를 감시하는 것을 현시적으로 알려야 합니다. (기본적으로 lintsjavascript와 JSX 파일만 가능합니다.)다음 지침을 따르십시오.

내부 VS 코드 사용: Ctrl+Shift+P 또는 Shift+Cmd+P

유형: Preferences: Open Settings (JSON)

옵션 선택

이 코드를 열린 JSON 파일에 붙여넣기

{
    "eslint.validate": [
        "typescript",
        "typescriptreact"
    ]
}

VS 코드에서 Ctrl+Shift+P 또는 Shift+Cmd+P 을 클릭하고eslint를 입력하면 확장에 사용할 수 있는 모든 명령을 표시합니다.단, 이 명령들은 작동할 수 없습니다. 왜냐하면 우리는eslint 의존항을 설치하지 않았기 때문입니다. 지금부터 시작합시다.

프로젝트에 eslint 설치 또는 컴퓨터에 전역 설치
우리는 지금 두 가지 선택이 있다.
1) 전 세계에 eslint dependency를 설치할 것입니다. (이것은 기계의 모든 프로젝트에 적용될 것입니다. 쿨!)

# using npm
npm install -g eslint
# using yarn
yarn global add eslint

2) 우리는 모든 프로젝트에 의존항을 설치할 것이다. 이것은 개발자에게 이러한 의존항을 사용하도록 명확하게 알려주는 데 도움이 될 것이다.

# Go to the root of the project (where package.json lives)
cd my-project
# using npm
npm install -D eslint
# using yarn
yarn add -D eslint

It's your choice which one of these you want to use

Eslint에 타이핑 스크립트 가르치기
Eslint는 기본적으로 Typescript 구문을 이해하지 않습니다.이것이 바로 당신이 들어본 이유tslint입니다. 이것은 Typescript 프로젝트에서 eslint를 대체하는 데 사용되고 있습니다. 그러나 이 소프트웨어 패키지의 지지자들은 올해 초에 반대tslint를 선언했고 지원typescript-eslint 프로젝트(이것은 monorepo이기 때문에 우리는 그 중에서 몇 개의 소프트웨어 패키지를 설치할 것입니다).

# using npm
npm i -D typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin
# using yarn
yarn add -D typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin

우리는 eslint를 위해 프로필을 생성할 것입니다.다음과 같은 세 가지 유형이 있습니다.

Javascript 파일

JSON 파일 - 이 파일을 사용할 예정입니다.

YAML 파일

eslintConfig 필드 입력package.json

프로젝트의 루트 디렉토리.eslintrc 파일을 만들고 다음 코드를 붙여넣습니다.

{
    "parser": "@typescript-eslint/parser",
    "plugins": ["@typescript-eslint"],
    "rules": {
        "semi": ["error", "never"],
        "quotes": [2, "single"]
    }
}

@typescript-eslint/parser 을 추가하고 있습니다. (이것은 typescript 파일을 분석하여 eslint가 그것들을 정확하게 이해할 수 있도록 합니다.)그리고 plugins에서 우리는 @typescript-eslint 플러그인을 추가하여 typescript 코드에 특정한 규칙을 추가할 수 있습니다.rules에서 우리는 몇 가지 예시 규칙을 추가했다(분호를 사용할 수 없고 쌍인용이 아닌 단인용을 사용할 수 없다)
이 방법을 사용하면 확장자가 .ts or .tsx인anywhere 파일을 만들고 다음 코드를 작성합니다.

console.log("This shows errors");

너는 문자열에 밑줄이 그어져 있고, 분호가 있는 것을 보아야 한다.이 코드가 위반한 규칙을 보여 줍니다.

자동 헤드 오류 수정 추가!
멋있다. 지금 우리가 eslint 규칙을 위반한 내용을 입력할 때 편집기에 오류가 나타난다. 우리는 수동으로 그것을 복구할 수 있지만, 이것은 시간이 많이 걸린다. 우리는 자동 복구로 더욱 잘 할 수 있다.
VS Code eslint 확장자는 파일을 저장할 때 eslint --fix 명령을 실행한다는 것을 알려 줍니다.

내부 VS 코드 사용: Ctrl+Shift+P 또는 Shift+Cmd+P

유형: Preferences: Open Settings (JSON)

옵션 선택

열려 있는 JSON 파일의 eslint 관련 코드 업데이트

{
    "eslint.validate": [
        {
            "language": "typescript",
            "autoFix": true
        },
        {
            "language": "typescriptreact",
            "autoFix": true
        }
    ],
    "eslint.autoFixOnSave": true,
}

현재, eslint 오류가 있는 typescript 파일을 저장할 때마다 자동으로 복구됩니다.경탄할 만한!

명령줄에서 eslint을 실행합니다!
우리는 거의 완성했다. 우리가 해야 할 마지막 작업은 스크립트를 설정해서eslint check를 실행하는 것이다.
스크립트는 전송된 코드의 형식이 정확한지 확인하기 위해 CI에서 실행될 수 있습니다.
eslint를 사용하여 명령줄의 코드를 쉽게 검사하려면 다음을 참조하십시오.

# Scans from the root of the project
eslint .
# Scans only src directory of the project
eslint src/*

그러나 이 명령들 중 작은 문제가 하나 있다.왜 그런지 알아요?🤔
기본적으로 자바스크립트 파일만 스캔하기 때문에 typescript 파일은 무시됩니다.따라서 프로젝트에 자바스크립트 파일이 없고 typescript 파일만 있으면 다음과 같은 내용을 볼 수 있습니다.

Oops! Something went wrong! :(

ESLint: 6.6.0.

No files matching the pattern "." were found.
Please check for typing mistakes in the pattern.

그래서 lint typescript 파일에 대해 ext<보려는 파일 확장자의 쉼표 구분 목록을 추가해야 합니다.따라서 명령은 다음과 같이 나타납니다.

# Scans from the root of the project
eslint --ext ts,tsx .
# Scans only src directory of the project
eslint --ext ts,tsx src/*

이것뿐입니다. typescript를 사용하여 eslint을 설정했습니다.😎

This post was published on my blog, so you can check it out here!