프로젝트 패턴 및 도구 - ESLint

더 나아가 코드 형식을 잘 유지하는 데 도움이 되는 다음 도구는 ESLint이며 오늘 TypeScript와 함께 작동하도록 이 도구를 구성할 것입니다.

아마도 ESLint는 코드를 "제어"상태로 유지하기 위한 세 가지 도구(eslint, editorconfig 및 prettier) 중 가장 중요한 도구일 것입니다.

예를 들어 JavaScript의 경우 줄 끝에 세미콜론이 필요하지 않으며 취향에 따라 따옴표나 큰따옴표를 사용할 수도 있습니다.

ESLint를 사용하면 팀이 따라야 할 형식의 종류를 정의할 수 있으므로 코드를 병합하려고 할 때 코드를 읽을 수 있고 충돌을 피할 수 있습니다.

설치

먼저 시작하기 전에 VSCode용 ESLint 확장을 설치해야 합니다.

eslint

코드를 저장할 때 파일 형식을 지정하려면 VSCode에서 codeActionOnSave 옵션을 설정해야 합니다. 구성에 아래 코드를 추가해야 합니다.

VSCode의 settings.json을 열고 아래 구성을 추가합니다.

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

그런 다음 NodeJS 프로젝트의 개발 종속성으로 ESLint를 설치할 수 있습니다.

yarn add eslint -D

설치 후 eslint를 초기화하여 프로젝트에 대한 구성을 추가해야 합니다.

yarn eslint --init

이제 프로젝트에 대한 설정을 선택해야 하므로 예제로 다음 구성을 선택하겠습니다(자신의 프로젝트에 대해 원하는 옵션을 선택할 수 있음).

ESLint 구성 단계

ESLint를 어떻게 사용하시겠습니까?
> 구문을 확인하고 문제를 찾고 코드 스타일을 적용하려면

프로젝트에서 어떤 유형의 모듈을 사용합니까?
> JavaScript 모듈(가져오기/내보내기)

프로젝트에서 어떤 프레임워크를 사용합니까?
> 이들 모두 없음(백엔드 프로젝트를 구성하고 있기 때문에)

프로젝트에서 TypeScript를 사용합니까?
> 예

코드는 어디에서 실행됩니까?
(스페이스 바를 사용하여 브라우저 선택을 취소하고 노드를 선택하십시오.)
> 노드

프로젝트의 스타일을 어떻게 정의하시겠습니까?
> 인기 있는 스타일 가이드 사용

어떤 스타일 가이드를 따르시겠습니까?
> 에어비앤비

어떤 형식의 구성 파일을 원하십니까?
> JSON

지금 npm으로 설치하시겠습니까?
> 아니오(이 경우에는 원사를 사용하기 때문에 아니오로 대답한 다음 종속 항목을 수동으로 설치해야 합니다.)

이제 아래 명령을 실행해야 합니다.

yarn add @typescript-eslint/eslint-plugin@latest eslint-config-airbnb-base@latest eslint@^5.16.0 || ^6.8.0 || ^7.2.0 eslint-plugin-import@^2.21.2 @typescript-eslint/parser@latest -D

.eslintignore 파일을 만들고 아래 구성을 입력하여 필요하지 않은 일부 파일에 대한 Linting을 무시하는 것을 잊지 마십시오.

/*.js
node_modules
거리

마지막으로 ESLint 초기화를 구성할 때 생성된 .eslintrc.json 파일을 구성하겠습니다.

"extends"옵션 안에 아래 줄을 추가해야 합니다.

"plugin:@typescript-eslint/recommended"

따라서 이제 TypeScript를 "가져오기"하는 Node의 기능을 활성화하기 위해 하나의 종속성을 설치해야 합니다.

이를 위해 아래 명령을 입력하고 Enter 키를 누르십시오.

yarn add eslint-import-resolver-typescript -D

그런 다음 .eslintrc.json 파일에 대해 아래 구성을 추가합니다.

"settings": {
    "import/resolver": {
      "typescript": {}
    }
  }

확장자 없이 "tsx"파일 유형에서 "가져오기"를 활성화하려면 "규칙"내부에 아래 구성을 추가하십시오.

"import/extensions": [
            "error",
            "ignorePackages",
            {
              "ts": "never"
            }
          ]

파일은 아래 파일과 같아야 합니다.

{
    "env": {
        "es2020": true,
        "node": true
    },
    "extends": [
        "airbnb-base",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
        "import/extensions": [
            "error",
            "ignorePackages",
            {
              "ts": "never"
            }
          ]
    },
    "settings": {
        "import/resolver": {
          "typescript": {}
        }
      }
}

끝났다!

모든 변경 사항을 완료하고 적용하려면 프로젝트의 루트 폴더에서 VSCode를 닫았다가 다시 열어야 모든 변경 사항이 예상대로 작동하는지 확인할 수 있습니다.

원하는 경우 잘못된 코드를 작성하려고 시도하면 ESLint가 오류를 발견해야 합니다.

다음 포스팅에서는 ESLint로 VSCode에 Prettier를 설정하도록 하겠습니다.

그게 다야, 여러분!

읽어주셔서 감사하고 도움이 되었기를 바랍니다. 질문과 제안을 댓글로 남겨주세요.