ReactJS – Airbnb 스타일 가이드를 사용하여 Git 커밋 시 자동 Lint 및 포맷

당신이 팀에서 일할 때, 모든 개발자는 자신의 스타일을 가지고 있다.모든 파일에서 일치하는 스타일을 유지하는 것이 매우 중요하다.
코드 한 단락을 봐라, 너는 누가 썼는지 알아야 한다😉
이 설명서가 있으면 Git 커밋에서 자동 linting 및 포맷을 설정할 수 있습니다.
NodeJS 개발자인 경우 다음을 참조하십시오. NodeJS – Auto Lint & Format on Git Commit with Airbnb Styleguide
그것은 네 부분으로 나뉜다
배우실 거예요.

Airbnb 스타일 안내서

를 사용하여 Eslint 설정

Prettier

를 사용하여 형식 설정

Git 커밋 시 자동 Lint 및 포맷

Eslint 및 Prettier용 VS 코드 구성

Linting 및 포맷이 필요한 이유

청결 코드

오류, 타자 오류, 문법 오류를 쉽게 찾을 수 있음

모범 사례 준수

권장되지 않음/유해한 방법 사용에 대한 경고

전체 팀의 코드 스타일 일치

콘솔과 같은 유해 코드를 사용하지 마십시오.로그

공공관계를 최고로 만들어 평론가들의 두통을 줄였다!

Airbnb 스타일 가이드를 사용하여 Eslint 설정

Eslint는 자바스크립트와 JSX에 사용되는 linting 유틸리티로 좋은 규칙과 플러그인을 가지고 있습니다.누구나 Eslint에 대한 규칙을 작성할 수 있습니다.예제 규칙은 "console.log () 를 사용하지 마십시오."
다행히도 Airbnb는 자바스크립트를 위한 스타일 안내서를 작성했고 그들이 사용하는 대부분의 최선의 실천을 포함했다.그것은 기본적으로 서로 다른 규칙의 집합이다.여기서 읽으셔도 됩니다 – Airbnb JavaScript Style Guide
1단계 – 필요한 소프트웨어 패키지 설치npm i -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react2단계 - 프로젝트의 루트 디렉토리에 새 파일.eslintrc을 만들고 다음 내용을 붙여넣습니다.

{
  "env": {
    "browser": true
  },
  "extends": ["airbnb", "prettier"]
}

3단계 – package.json – "lint": "eslint 'src/**/*.{js,jsx}' --fix" 에서 lint에 새 명령 추가
이제 실행 npm run lint 을 통해 코드를 필터할 수 있어야 합니다.그것은 복구 가능한 오류를 복구하려고 시도할 것이다.그렇지 않으면 오류/경고가 발생합니다.

Prettier를 사용하여 형식 설정

Eslint는 코드를 삭제하고 코드의 오류를 찾는 데 사용되지만 Prettier 포맷에만 사용됩니다.JavaScript 외에도 Pretter는 json, HTML, CSS, markdown, sql, yaml 등을 포맷할 수 있습니다. Eslint와 Pretter를 동시에 사용하는 것을 강력히 권장합니다.
1단계 – npm i -D prettier-eslint-cli eslint-config-prettier를 통해 Prettier CLI 패키지 설치
2단계 – package.json-"format": "prettier --write 'src/**/*.{js,jsx,css,scss}'"에서 포맷할 새 명령 추가
우리가 이전에 한 것처럼 Prettier 포맷 코드를 사용하려면 npm run format 를 실행할 수 있어야 합니다!

Git 커밋 시 자동 Lint 포맷(&F)

비록 우리는 lint를 실행하고 포맷하는 명령을 구축했지만, 대부분의 개발자들은 그것을 실행하는 것을 잊어버리고git에 제출합니다.npmrunlint를 CI/CD로 설정할 수 있습니다. 오류가 발생할 때마다 실패합니다.그러나 만약 우리가 누군가가 제출할 때마다 이런 검사를 진행할 수 있다면 다행이다.

헤스키와 린트가 구조대에 올랐다

Husky 커밋하기 전에 실행할 명령을 추가할 수 있습니다.그것은 이용했다git hooks.
Lint-staged - "일시적으로 저장된git 파일에linter를 실행합니다."제출할 때마다 Eslint 및 Prettier를 실행하는 데 많은 시간이 소요됩니다.lintstaged를 사용하면staged 파일에서만 이 파일을 실행할 수 있습니다.
husky 및 lint 설치npm i -D husky lint-staged구성을 위해 편집package.json이 필요합니다.다음은 전체 파일입니다.

{
  "scripts": {
    "lint": "eslint 'src/**/*.{js,jsx}' --fix",
    "format": "prettier --write 'src/**/*.{js,jsx,css,scss}'"
  },
  "lint-staged": {
    "**/*.js": [
      "eslint --fix",
      "prettier-eslint --write",
      "git add"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "devDependencies": {
    "eslint": "^5.15.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-prettier": "^4.1.0",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-react": "^7.12.4",
    "prettier-eslint-cli": "^4.7.1",
    "husky": "^1.3.1",
    "lint-staged": "^8.1.3"
  }
}

우리는 헤스키가 제출할 때마다lint를 실행하도록 했다.Lint staged는 staged 파일에 eslint,prettier, "git add"를 실행합니다.마지막 "gitadd"는 변경된 파일을 다시 제출하는 것입니다. 형식이 바뀔 수 있기 때문입니다.

이런 검사 없이 제출해야 합니까?

만약 화재가 발생하면 어떻게 합니까🙂 너는 승낙하려고 하느냐?"콘솔 로그 삭제하세요"같은 거?추가--no-verify(git commit –m -n “Urgent commit!”를 통해git에게 이 갈고리를 실행하지 말라고 알려줍니다

Eslint 및 Prettier용 VS 코드 구성

Eslint와 Prettier는 VS 코드에 모두 잘 통합되어 있습니다.오류/경고, 입력/저장 시 코드 수정 등이 자동으로 강조 표시됩니다.ext install dbaeumer.vscode-eslint 및 ext install esbenp.prettier-vscode를 통한 설치Eslint 및 Prettier 연장 부품
설치가 완료되면 VS 코드 설정을 엽니다.json(Ctrl+,) 파일 및 다음을 추가합니다.

{
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.formatOnType": true,
  "prettier.eslintIntegration": true
}

결론

이제 Eslint와 Prettier를 구성해야 합니다. 파일을 제출하려고 할 때마다 파일을 스캔하고 모든 오류를 복구하거나 자동으로 복구할 수 없는 오류를 표시합니다.좋아했으면 좋겠어.
질문이 있거나 다른 피드백이 있으면 다음 의견을 발표해 주십시오!
이 글은 최초로 나의 블로그Coffee N Coding에 발표되었다.따라와, 이렇게 멋진 것들을 많이 나눴어.
FB Messenger 내 블로그 구독