프로젝트를 위한 ESLint Prettier 및 Husky 구성

ESLint로 Prettier를 설정하고 Husky로 커밋을 확인합니다.

Eslint, Prettier 및 Pre-Commit을 설치해야 합니다.
3개의 패키지는 다른 작업을 수행하며 그 유용성은 아래에 강조 표시되어 있습니다.

ESLint - 린팅 및 적용 스타일 가이드.

Prettier - 코드 포맷용.

Pre-Commit - 커밋되는 코드가 가이드라인을 따르고 올바른 형식으로 지정되었는지 확인합니다.

설치

패키지는 프로젝트에 로컬로 또는 전역으로 설치할 수 있습니다.

ESLint 설정

npm install --save-dev eslint

eslint를 설치한 후 설정, 즉 구성해야 합니다.

npx eslint --init

eslintrc.json 파일에 포함될 텍스트 샘플

{
"extends": ["airbnb", "prettier" "eslint:recommended"],
"plugins": ["prettier"],
"rules": {
"semi": ["error", "always"],
"quotes": ["error", "double"]

"prettier/prettier": ["error"] // if you choose to use prettier rules.
},

}

Prettier 설정하기

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

그런 다음 프로젝트의 루트 디렉터리에 .prettierrc 파일을 만듭니다.

터미널에 echo {} .prettierrc를 입력하여 파일을 생성할 수 있습니다.

touch {} .prettierrc 

여기에서 더 보기 좋은 서식 설정을 구성할 수 있습니다.

prettierrc.json 파일 내에서 구성할 수 있는 설정 샘플

{ 
"useTabs": true,
"tabSize": 2,
"semi": true,
"singleQuote": true,
"trailingComma": "es5",
"bracketSpacing": true,
"parser":"typescript"

}

사전 커밋 및 사전 푸시 설정

이것은 매우 중요한 단계입니다. 이렇게 하면 팀의 개발자가 코드를 커밋하기 전에 개발자가 변경한 사항이
EsLint 및 코드가 올바른 형식입니다.

lint-staged 사용을 시작하는 가장 빠른 방법은 터미널에서 다음 명령을 실행하는 것입니다.

npx mrm lint-staged

husky 및 package.json 종속성의 코드 품질 도구에 따라 lint-staged를 설치 및 구성하므로 그 전에 Prettier , ESlint 과 같은 모든 코드 품질 도구를 설치하고(npm install --save-dev ) 구성해야 합니다. .

이를 구현하기 위한 또 다른 대안 일부 패키지를 구성해야 합니다

우리가 필요로 하는 첫 번째 패키지는 허스키입니다.
이 후크는 매우 쉽습니다.

lint-staged라는 패키지도 필요합니다.
변경된 페이지만 확인합니다. 따라서 스테이징된 파일만 확인하고 나머지 코드는 확인합니다.
그대로 유지됩니다.

매우 빠르게 포맷되지 않은 파일을 확인하고
Prettier를 사용하여 형식을 지정하세요.

패키지 설치

npm install --save-dev husky lint-staged pretty-quick

이러한 패키지를 설치한 후 package.json 파일에 구성을 추가해야 합니다.

"lint-staged": {
"*.js": "eslint --cache --fix"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged && pretty-quick --staged"
}
}

이름에서 알 수 있듯이 변경 사항을 커밋하려고 하면 'lint-staged' 및 'pretty-quick' 명령이 모두 실행됩니다.

lint-staged는 자바스크립트 파일에서 eslint 명령을 실행합니다.
상연됨,

다음과 같은 경우 자바스크립트 파일이 매우 빠르게 포맷됩니다.
Prettier를 사용하지 않습니다.

스테이징된 파일이 제대로 린팅되지 않았거나 형식이 지정되지 않은 경우 경고가 표시되고 커밋이 중지됩니다.
코드의 변경