On team projects, we generally agree on code submission specifications. Here’s a quick look at using the Git hook plug-in to normalize your commit code.

1. Introduction

In Git, every time a Git commit, git push, etc., triggers one or more shell scripts, called hooks, stored in the.git/hooks directory. There are two types of hooks: front hooks, which are executed before the git command is invoked, and back hooks, which are executed after the git command is executed.

Therefore, when submitting git commands, we can do some extra things, such as code detection before submission, deployment after submission and other functions. Below, we use plug-ins to implement commit information verification, code formatting, code detection and other functions before code submission.

Step 3.

2.1 Installing plug-ins

First, install husky, Pretty – Quick, Lint-staged, CommitLint, and ESLint plugins.

cnpm i husky pretty-quick lint-staged commitlint eslint --save-dev
Copy the code
  • Husky: Write a script like pre-commit in.git/hooks to activate the hooks that fire on git action
  • Pretty – Quick: Code formatting
  • Lint-staged: Only the files in staging are checked each time you commit
  • Commitlint: format verification is performed on each commit message submitted by Git
  • Eslint: Code quality checks

2.2 modify the package. The json

Modify package.json configuration to set Lint-staged and husky.

"lint-staged": {
    "linters": {
      "**/*.{js,vue}": [
        "eslint --fix"."git add"]}}Copy the code
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged && lint-staged"."commit-msg": "commitlint -E HUSKY_GIT_PARAMS"}}Copy the code
  • After installing husky, write the pre-commit hook in.git/hooks, and execute pretty — quick — lint-staged commands before git commit.
  • Pretty – Quick to format the submitted file, prettier.config.js needs to be configured
  • Lint-staged references to package.json, using Linters to apply filtering rules to file paths in staging, and matching files perform tasks configured below, in this case esLint code checks, Run git add to the staging area for the code that doesn’t have problems.
  • Commitlint-e HUSKY_GIT_PARAMS, you need to configure the commitlint.config.js file.
  • If an error occurs during the task execution, exit and do not execute the commit code.

2.3 Adding a Configuration File

The following configuration files are for reference only.

// prettier.config.js
module.exports = {
  printTabWidth: 2, // a TAB represents a number of Spaces, default is 80 useTabs:false, // Whether to use TAB for indentationfalseSingleQuote:true// Whether to use single quotation marks for stringsfalse, using double quotation marks semi:true, // Whether to use semicolons (;)true
};
Copy the code
// commitlint.config.js
module.exports = {
  rules: {
    'type-enum'A: [2,'always'['build'.'ci'.'chore'.'merge'.'docs'.'feat'.'fix'.'test']],'body-leading-blank': [1, 'always'].'footer-leading-blank': [1, 'always']}};Copy the code
// .eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/essential'.'@vue/prettier'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off'.'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    quotes: [1, 'single'].'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }]
  },
  parserOptions: {
    parser: 'babel-eslint'}};Copy the code

Refer to the address: www.jianshu.com/p/dc55ddd6c…