What is githooks

Git Hooks are custom scripts that Git fires when certain important actions occur. Includes client and server hooks. Git Hooks

The client hooks

Client-side hooks are invoked by operations such as commit and merge. These include submit workflow hooks, E-mail workflow hooks, and others. Pre-commit prepared -commit- MSG commit- MSG post-commit

hooks	trigger	Functional specifications
pre-commit	git commitPerform before	The hook that checks for a snapshot to be committed runs before you type the commit, exits with a non-zero value, and Git abandonsthe commit. For example, you can use this hookCheck for consistency in code style
prepare-commit-msg	git mergePerform before	Run after the default information is created before starting the Submit information editor. The hook receives options: the path of the file that holds the current commit information, the commit type, and the SHA-1 validation of the commit that fixes the commit. canUsed in conjunction with templates to dynamically insert information.
commit-msg	git commitPerform before	The hook receives an argument, the path to the temporary file that holds the current commit information. The hook exits with a non-zero value, and Git abandons the commit. Can be used toVerify that the submission information follows the specified template.
post-commit	git commitAfter performing	It does not accept any arguments. This hook is generally usedNotices and things like that.

Bypass githooks

Git commit –no-verify bypassing the pre-commit hook check.

Normalization tool

• Husky githooks tools
• Lint-staged formatting tool for files that have been modified, for files that have been
• Eslint checks for syntactic plug-ins
• Stylelint Check CSS syntax plug-in
• Prettier a tool for automatically formatting code
• Commitlint code submission detection tool
• Commitizen code submission normalization tool
• The Angular specification uses the most extensive Commit Message specification

🐶 husky

Husky is an NPM package that allows you to easily access Githooks and control the execution of scripts at certain stages in Git. Specify the script to execute by including the object “husky”: {} in the package.json file.

❗️ The following version is [email protected]

installation

Automatic installation (recommended)

# npm 
npx husky-init && npm install

# Yarn
npx husky-init && yarn
Copy the code

💡 husky-init is a one-time command used to quickly initialize the project using husky, and then automatically create the commit-msg hook

Manual installation

1. The installationhusky

npm install husky --save-dev
Copy the code

2. Enable githooks

npx husky install
Copy the code

3. To automatically enable hooks after installation, edit package.json

npm set-script commit-msg "npx --no-install commitlint --edit "$1""
Copy the code

💡 NPM set-script requires more than nPM7.x.

👆 so far 👇, the effect is

1. Git now has a.husky folder and a commit-msg hook
2. Step 3: Add the following code to the package.json file

// package.json 
{
    "scripts": { 
        "commit-msg": "npx --no-install commitlint --edit "$1"" 
    } 
}
Copy the code

3. View git configuration itemsgit config --get core.hooksPath 为 .husky

Create/edit hooks

To do this, NPX husky Install is executed.

Execute husky add

[CMD] to add a hook.

npx husky add .husky/pre-commit "npm test"
Copy the code

Edit the generated hook file.git/.husky/commit-msg

Uninstall the husky

Uninstall husky and delete the. Husky file, reset the core.hooksPath configuration item, and delete the. Husky folder

# npm 
npm uninstall husky && git config --unset core.hooksPath && rm -rf .husky
# yarn
yarn remove husky && git config --unset core.hooksPath && rm -rf .husky
Copy the code

Try to submit code

Git commit -m 'test husky pre-commit' >> husky > pre-commit (node v10.15.3)Copy the code

💡 If the husky script is not executed at the git commit, try reinstalling the lower version of husky

# NPM NPM unstall husky -d NPM install -d [email protected] # yarn yarn remove husky yarn add [email protected] -dCopy the code

🚫 💩 lint – staged

Run linters against staged git files and don’t let 💩 slip into your code base!

Install the configuration

# npm
npm install lint-staged --save-dev
# yarn
yarn add lint-staged -D
Copy the code

// package.json
"husky": {
    "hooks": {
        "pre-commit": "lint-staged"
    }
},
"lint-staged": {
    "*.{js,jsx,ts,tsx}": "eslint",
    "*.{css,less,scss,styl}": "stylelint"
},
Copy the code

Try to submit code

Git commit -m 'test lint-mustn 'husky > pre-commit (node V14.17.4) stocking... ⚠ Running tasks... ❯ Running tasks for *.{js, JSX, TS, TSX,vue} * FAILED] ↓ No staged files match *.{CSS,less, SCSS,styl} [deflated] ↓ To be deflected or checked. To be deflected or checked... ✔ Cleaning up... ✖ eslint: /... /config.ts 10:1 error Too many blank lines at the end of file. Max of 0 allowed no-multiple-empty-lines 11:1 error Trailing Spaces not allowed no-trailing Spaces 11:5 error Newline required at end of file but not found eol-last * 3 problems (3 errors, 0 warnings) 3 errors and 0 warnings potentially fixable with the `--fix` option.Copy the code

➿ commitlint

Commitlint is a tool for checking commit information, and can be used with HusKY to implement commitlint detection for commit-Msg.

The installation

# npm
npm install @commitlint/cli @commitlint/config-conventional -D
# yarn 
yarn add @commitlint/cli @commitlint/config-conventional -D
Copy the code

Add the hook

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
Copy the code

Test to submit

Git commit -m 'test' ⧗ input: test * Subject may not be empty [subject-empty] * Found 1 problems, 0 warnings ⓘ Get help https://github.com/conventional-changelog/commitlint/#what-is-commitlint husky - commit-msg hook exited with code 1 (error)Copy the code

Prompt – CLI format commit-msg

The installation

npm install --save-dev @commitlint/prompt-cli
Copy the code

Setup scripts

{ "scripts": { "commit": "commit" } }
Copy the code

Test to submit

git add .
npm run commit
Copy the code

Please enter a type: [optional] [tab-completion] [header]
<type> holds information about the goal of a change.



<type>(<scope>): <subject>
<body>
<footer>


108 characters left
Copy the code

✨ commitizen

The installation

# npm
npm install commitizen cz-conventional-changelog -D
# yarm
yarn add commitizen cz-conventional-changelog -D
Copy the code

Configure the commit- MSG option

// package.json "config": {"commitizen": {"path": "CZ-conventional -changelog", "types": {"🚀 feat": {"description": "Introducing new Features", "title" : "the Features"}, "🐛 fix" : {" description ":" fix the bug ", "title" : "bug Fixes"}, "📝 docs" : {" description ": "Document", "title" : "Documentation"}, "💄 style" : {" description ":" style changes ", "title" : "Styles"}, "💬 text" : {" description ":" copy to modify ", "title" : "Texts"}, "💩 poo" : {" description ":" rewrite the shit Code ", "title" : "Code Poop"}, "⚡ ️ perf" : {"description": "Performance Improvements", "title": "Performance Improvements"}, "✅ test": {"description": "add tests ", "title": "Tests"}, "🏗 build": {"description": "changes affecting build system or external dependencies ", "title": "Builds"}, "✂️ tool": {"description": "Happy to increase development value Tools", "title" : "Tools"}, "💚 ci" : {" description ": "Changes to CI configuration files and scripts (sample ranges :Travis, Circle, BrowserStack, SauceLabs)", "title": "Continuous Integrations"}, "🧹 chore": {"description": "daily Chores", "title": "Chores"}, "⏪ revert": {"description":" revert historical version ", "title": "Reverts"}, "👥 conflict" : {" description ":" modify conflict ", "title" : "conflict"}, "🚮 delete" : {" description ": "Delete Files", "title" : "Delete Files"}, "🔖 stash" : {" description ":" temporary Files ", "title" : "stash Files"}}}},Copy the code

Install and commit

Method 1: Install Commitizen globally

# npm
npm install -g commitizen
# yarn
yarn add -g commitizen

git cz
Copy the code

Way 2

npx cz
Copy the code

Submit the commit – MSG

? Research the type of change that you're right (🚀 feat: Introduce new features) What is the scope of this change (e.g. component or file name): (press enter to skip) ? Write a short, imperative tense description of the change (max 91 chars): (3) abc ? Provide a longer description of the change: (press enter to skip) ? Are there any breaking changes? No ? Does this change affect any open issues? NoCopy the code

👆 At this point, commit-msg has been generated and if all goes well, the modified content has been committed.

💡 Error: CommitLint does not recognize emoji.

⧗   input: 🚀 feat: "abc"
✖   subject may not be empty [subject-empty]
✖   type may not be empty [type-empty]

✖   found 2 problems, 0 warnings
ⓘ   Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint

Copy the code

🅰 ️Presents the specification

The Angular specification’s commit-msg consists of three sections: Header, Body, and Footer. The Header is required.

Header

The Header section is a single line with three fields: Type (required), scope (optional), and subject (required).

type

Type indicates the type of commit. Only the following seven identifiers are allowed.

• Feat: New Feature
• Fix: Fixes bugs
• -Jenny: There are some docs.
• Style: format (changes that do not affect code execution)
• Refactor: refactoring (i.e. code changes that are not new features or bug fixes)
• Test: Adds a test
• Chore: Changes to the build process or helper

scope

Scope is used to specify the scope of the commit impact, such as the data layer, control layer, view layer, and so on, depending on the project.

subject

Subject is a short description of the commit purpose, no more than 50 characters long.

• Start with a verb and use the first person present tense, as inchangeRather thanchangedorchanges
• The first letter is lowercase
• Ending without a period (.)

Body

The Body section is a detailed description of the commit, broken into multiple lines. Such as:

• Bullet points are okay, too
• Use a hanging indent

Footer

The Footer section is only used in two cases.

Incompatible variation

If the current code is incompatible with the previous version, the Footer section begins with BREAKING CHANGE, followed by a description of the CHANGE, the reason for the CHANGE, and the migration method.

Close the Issue

If the current commit is for an issue, you can close that issue in the Footer section, or multiple issues. Such as:

Closes #123
Closes #123, #245, #992
Copy the code

Revert

Revert is a special case. If the current COMMIT is used to undo a previous COMMIT, it must begin with Revert:, followed by the Header that was revoked. The format of the Body part is fixed. It must be written as This reverts commit

. The hash is the SHA identifier of the revoked commit. Such as:

revert: feat(pencil): add 'graphiteWidth' option

This reverts commit 667ecc1654a317a13331b17617d973392f415f02.
Copy the code