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 commit Perform 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 merge Perform 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 commit Perform 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 commit After 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
- The installation
husky
npm install husky --save-dev
Copy the code
- Enable githooks
npx husky install
Copy the code
- 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
- Git now has a.husky folder and a commit-msg hook
- 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
- View git configuration items
git 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 in
change
Rather thanchanged
orchanges
- 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