Husky, Commitlint, Prettier 및 Lint-Staged로 개발 워크플로 향상

자동화된 작업 흐름을 설정하면 프로젝트의 코드 품질과 일관성을 크게 향상시킬 수 있습니다. 이 가이드에서는 Husky, Commitlint, Prettier 및 Lint-Staged를 설정하여 코드베이스가 일관되게 형식화되고, 커밋 메시지 규칙을 따르며, 각 병합 후 최신 종속성이 있는지 확인합니다.

허스키 설정하기

Husky는 Git 후크를 쉽게 관리할 수 있도록 도와주므로 모든 커밋 전에 코드 품질 검사와 같은 자동화된 작업을 실행할 수 있습니다.

설치

npm을 사용하여 Husky를 개발 종속성으로 설치합니다(이 문서에서는 npm을 사용합니다).

npm install --save-dev husky

초기화

Git 후크가 저장될 .husky 디렉토리를 생성하려면 다음을 실행하세요.

npx husky init

다음으로 package.json에 다음 스크립트를 추가하여 종속성을 설치할 때 Husky를 설정하세요.

"scripts": {
  "prepare": "husky install"
}

커밋린트 구성

Commitlint는 모든 커밋 메시지가 일관된 형식을 따르도록 보장하여 커밋 기록을 깔끔하게 유지합니다.

설치

기존 구성과 함께 Commitlint를 설치합니다.

npm install --save-dev @commitlint/config-conventional @commitlint/cli

설정

1. .husky에 commit-msg 후크를 만듭니다. 이제 .husky 디렉터리에 commit-msg라는 새 파일을 만들고 다음 줄을 추가합니다.

npx husky add .husky/commit-msg "npx --no-install commitlint --edit \"\""

1. 다음 내용이 포함된 commitlint.config.js 파일을 프로젝트 루트에 추가합니다.

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    //   TODO Add Scope Enum Here
    // 'scope-enum': [2, 'always', ['yourscope', 'yourscope']],
    'type-enum': [
      2,
      'always',
      [
        'feat',
        'fix',
        'docs',
        'chore',
        'style',
        'refactor',
        'ci',
        'test',
        'revert',
        'perf',
        'vercel',
      ],
    ],
  },
};

Lint-Staged 및 Prettier 추가

Lint-Staged를 사용하면 준비된 파일에서 스크립트를 실행할 수 있으며 Prettier는 코드베이스에서 일관된 스타일을 적용합니다.

설치

두 가지 모두 개발 종속 항목으로 설치:

npm install --save-dev lint-staged prettier

더 예쁜 구성

원하는 구성으로 프로젝트 루트에 .prettierrc.json 파일을 만듭니다. 예는 다음과 같습니다.

{
  "plugins": ["prettier-plugin-tailwindcss"],
  "printWidth": 120,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "es5", 
  "semi": true, 
  "singleQuote": true,
  "bracketSpacing": true, 
  "arrowParens": "always",
  "jsxSingleQuote": false, 
  "bracketSameLine": false,
  "endOfLine": "lf"
}

린트 단계 구성

lint-staged 아래 package.json에 다음 구성을 추가하세요.

"lint-staged": {
    "**/*.{js,jsx,ts,tsx}": [
      "eslint --max-warnings=0",
      "prettier --write"
    ],
    "**/*.{html,json,css,scss,md,mdx}": [
      "prettier -w"
    ]
  }

Lint-Staged를 실행하기 위해 사전 커밋 후크를 추가합니다.

npx husky add .husky/pre-commit "npx lint-staged"

종속성을 위한 병합 후 후크 추가

병합 후 후크를 사용하면 npm install 또는 패키지 관리자를 실행하여 병합할 때마다 종속성을 업데이트할 수 있습니다.

병합 후 후크 만들기:

npx husky add .husky/post-merge "npm install"

결론

이 설정을 사용하면 프로젝트에서 표준화된 커밋 메시지 형식을 유지하고 코드 형식을 자동으로 지정하며 병합 후 종속성을 최신 상태로 유지합니다. 이 강력한 워크플로는 협업을 간소화하고 코드 품질을 향상시켜 훌륭한 기능을 구축하는 데 집중할 수 있도록 도와줍니다.

위 내용은 Husky, Commitlint, Prettier 및 Lint-Staged로 개발 워크플로 향상의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!