1분 안에 React 애플리케이션에서 Pre-commit Hook Prettier 구성

소프트웨어를 작성할 때 코드 스타일 지정 및 서식 지정이 중요합니다. 전체 JavaScript 코드를 한 줄에 형식화할 수 있기 때문에 JavaScript 코드를 읽을 수 있는지 확인하는 것이 더 중요합니다.

Prettier는 JavaScript, HTML, CSS, YAML, Markdown 및 GraphQL 등과 같은 언어와 호환되는 코드 형식입니다.

대부분 git 를 사용하여 변경 사항을 준비할 때 서식이 자동으로 수행되는 경우에도 유용합니다.

React 프로젝트에서 다음 종속 항목을 설치합니다.

yarn add -D prettier

그런 다음 .prettierrc 구성 파일을 추가합니다.

{
  "arrowParens": "always",
  "bracketSpacing": true,
  "embeddedLanguageFormatting": "auto",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": true,
  "printWidth": 80,
  "proseWrap": "preserve",
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false
}

팀과 함께 작업하는 경우 구성 파일의 규칙에 동의해야 합니다.

다음으로 특정 git hook에서 실행 스크립트를 사용하도록 설정을 단순화하는 husky를 추가해 보겠습니다. 다음은 pre-commit git hook의 예입니다.

{
  "scripts": {
    "prepare": "husky install",
    "format": "prettier --write .",
    "test": "jest"
  },
  "devDependencies": {
    "husky": "^6.0.0",
    "jest": "^26.6.3",
    "precise-commits": "^1.0.2",
    "prettier": "^2.3.0"
  }
}

.husky라는 디렉토리를 만들고 이 디렉토리 안에 pre-commit라는 다음 파일을 추가합니다.

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

yarn precise-commits

yarn precise-commits는 정확한 코드의 형식을 다시 지정하고 prettier의 코드 형식만 처리합니다.

그리고 구성이 완료되었습니다.

구성을 테스트하려면 다음 명령을 시도하십시오.

git add.
git commit -m 'test commit with husky'

그리고 짜잔.

bloggu.io을(를) 사용하여 게시된 기사. 무료로 사용해 보세요.