NodeJS에서 Eslint Prettier 및 Husky 설정

NodeJS 프로젝트에 Typescript를 사용하는 것은 유형 안전성을 보장하는 좋은 방법이며 개발자 경험도 크게 향상시킵니다. 그러나 Linter와 Formatter를 추가하여 이를 더욱 발전시킬 수 있습니다.

오늘 우리는 Typescript를 사용하여 NodeJS 프로젝트에 linter와 prettier를 추가하는 방법을 볼 것입니다.

우리는 이전 기사에서 이 프로젝트를 계속하고 있습니다. 저장소를 찾을 수 있습니다here.

1단계: 필수 종속성 설치

먼저 필요한 종속성을 설치하겠습니다.

yarn add -D eslint \
@typescript-eslint/eslint-plugin \
@typescript-eslint/parser

이제 Eslint는 기본적으로 TypeScript를 지원하지 않으므로 개발자 종속성으로 두 개의 추가 패키지를 추가합니다.

2단계: 구성 파일 만들기

이제 새 eslint 구성 파일을 만듭니다.

touch .eslintrc

그리고 거기에 다음 코드를 붙여넣습니다.

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": { "ecmaVersion": "latest", "sourceType": "module" },
  "extends": ["plugin:@typescript-eslint/recommended"],
  "env": {
    "node": true // Enabling Node.js global variables
  },
  "rules": {}
}

package.json 파일에 두 개의 스크립트를 추가하여 린트 및 서식을 쉽게 지정해 보겠습니다.

"scripts": {
    "lint": "eslint src/**/*.ts",
    "format": "eslint src/**/*.ts --fix"
}

이제 다음 명령을 실행하여 전체 프로젝트를 린트할 수 있습니다.

yarn lint

또한 .eslintignore 파일을 생성하여 일부 폴더가 린트되지 않도록 하는 것을 잊지 마십시오. 시간이 좀 걸릴 수 있습니다.

.eslintignore

그리고 거기에 다음 코드를 넣는다.

node_modules
dist

3단계: 더 예쁘게 추가

이제 프로젝트에 prettier를 추가해 보겠습니다. 먼저 종속성을 설치합니다.

yarn add -D prettier

그런 다음 루트 폴더에 .prettierrc 파일을 만들고 거기에 다음 구성을 추가합니다.

{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 120,
  "tabWidth": 2
}

이제 이 구성은 제 개인적인 취향입니다. 원하는 경우 구성을 사용할 수 있습니다.

또한 모든 파일에서 한 번에 prettier를 실행하기 위한 새 스크립트를 추가할 수 있습니다.

"scripts": {
    "pretty": "prettier --write \"src/**/*.ts\""
}

다음과 같은 모든 파일에 대해 더 예쁘게 실행하십시오.

yarn pretty

4단계: 허스키 추가

이제 이 모든 것이 굉장합니다. 그러나 나는 항상 이러한 명령을 실행하는 것을 잊습니다. 잘못된 코드가 소스 컨트롤에 푸시되지 않도록 하기 위해 Husky라는 훌륭한 도구를 사용할 수 있습니다.

커밋을 시도하기 전에 실행되며 일부 상태 확인을 실행할 수 있습니다. 더 잘 이해하기 위해 먼저 설치해 보겠습니다.

yarn add -D husky

그런 다음 package.json 파일에 새 블록을 추가합니다.

"husky": {
    "hooks": {
      "pre-commit": "yarn lint"
    }
}

따라서 변경 사항을 커밋하려고 할 때마다 이 사전 커밋 후크가 실행되고 코드가 자동으로 수정됩니다. 얼마나 멋진가요!

Github 저장소:

https://github.com/Mohammad-Faisal/nodejs-typescript-skeleton

내 연락
My Website에서 더 많은 기사 읽기