1. Initialize Husky && Install Husky

npx husky-init && yarn
Copy the code

Package. json automatically inserted the prepare script pre hook:

package.json

  "scripts": {
     ...
+    "prepare": "husky install"
     ...
  },
Copy the code

This hook can be executed at two times:

  1. When installing dependencies, that isyarn 和 yarn add **At the right time.
  2. Pre-release, that isyarn publishThe former.

2. Modify the automatically generated./husky/pre-commit hook

#! /bin/sh . "$(dirname "$0")/_/husky.sh" yarn lint-staged --verboseCopy the code

3. Manually generate commit- MSG and modify it

yarn husky add .husky/commit-msg 'yarn commitlint --edit $1'
Copy the code

Example Modify the commit- MSG file

#! /bin/sh . "$(dirname "$0")/_/husky.sh" yarn commitlint --edit $1Copy the code
  1. Used herecommitlintPackage, so installyarn add -D @commitlint/cli @commitlint/config-conventional 。
  2. With this line of command, you can equate to before"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"Commit detection reappears.

4. Generate the Commitlint configuration file in the root directory

commitlint.config.js

module.exports = { parserPreset: 'conventional-changelog-conventionalcommits', rules: { 'body-leading-blank': [1, 'always'], 'body-max-line-length': [2, 'always', 100], 'footer-leading-blank': [1, 'always'], 'footer-max-line-length': [2, 'always', 100], 'header-max-length': [2, 'always', 100], 'subject-case': [2, 'never', ['sentence-case', 'start-case', 'pascal-case', 'upper-case']], 'subject-empty': [2, 'never'], 'subject-full-stop': [2, 'never', '.'], 'type-case': [2, 'always', 'lower-case'], 'type-empty': [2, 'never'], 'type-enum': [ 2, 'always', ['build', 'chore', 'ci', 'docs', 'feat', 'fix', 'perf', 'refactor', 'revert', 'style', 'test'], ], }, prompt: { questions: { type: { description: "Select the type of change that you're committing", enum: { feat: {description: 'A new feature', title: 'Features', emoji: '✨',}, fix: {description: 'A bug fix', title: 'Fixes', emoji: '🐛',}, docs: {description: 'Documentation only changes', title: 'Documentation', emoji: '📚',}, style: {description: 'Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)', title: 'Styles', emoji: '💎',}, refactor: {description: 'A code change that neither fixes A bug nor adds A feature', title: 'Code Refactoring', emoji: '📦',}, perf: {description: 'A Code change that improves performance', title: 'Performance Improvements', emoji: '🚀',}, test: {description: 'Adding missing tests or correcting existing tests', title: 'tests', emoji: '🚨',}, build: {description: 'Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)', title: 'Builds', emoji: '🛠',}, CI: {description: 'Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)', title: 'Continuous Integrations', emoji: '⚙️',}, chore: {description: "Other changes that don't modify SRC or test files", title: 'forgo ', emoji: '♻️',}, revert: {description: 'Reverts a previous commit', title: 'Reverts', emoji: '🗑',},},}, scope: {description: 'What is the scope of this change (e.g. component or file name)', }, subject: { description: 'Write a short, imperative tense description of the change', }, body: { description: 'Provide a longer description of the change', }, isBreaking: { description: 'Are there any breaking changes? ', }, breakingBody: { description: 'A BREAKING CHANGE commit requires a body. Please enter a longer description of the commit itself', }, breaking: { description: 'Describe the breaking changes', }, isIssueAffected: { description: 'Does this change affect any open issues? ', }, issuesBody: { description: 'If issues are closed, the commit requires a body. Please enter a longer description of the commit itself', }, issues: { description: 'Add issue references (e.g. "fix #123", "re #123".) ',},},},},};Copy the code
  1. This configuration is an official example configuration. For details, see the official website.
  2. Used hereconventional-changelog-conventionalcommitsPackage, so installyarn add -D conventional-changelog-conventionalcommits 。

5. Clear the husky field in package.json

// "husky": {
//  "hooks": {
//    "pre-commit": "lint-staged"
//    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
//  }
// },
  "lint-staged": {
    "*.{ts,tsx,js}": [
      "eslint --config .eslintrc.js"
    ],
    "*.{css,less}": [
      "stylelint --config stylelint.config.js"
    ],
    "*.{js,jsx,tsx,ts,md,json}": [
      "prettier --write"
    ]
  },
  "commitlint": {
    "extends": [
      "@commitlint/config-conventional"
    ]
  },
Copy the code