Git hooks in the front-end code base

What you learned from this article:

• Basic knowledge of git hooks
• Analysis of the principle of yorkie
• How to use local vscode to open github project

The story goes like this:

Me: After adding the vue-tsc --noEmit --skipLibCheck && .... command to the npm run lint -- no-verify may not take effect

Colleague: I have a black line on my face, I can definitely continue to use -- no-verify pass the inspection

Me: ... got embarrassed

Isn't -- no-verify used to skip the lint check?

The above dialogue reflects several questions:

1. I don’t know what -- no-verify essentially works for
2. I don't know much about git hooks
3. I don't know much about eslint
4. I'm a vegetable. . .

The role of git hooks

Do some eslint verification before code commit, code formatting, check branch name, file directory specification, mandatory submission of yarn.lock file, etc. before pushing code

package.json file

"devDependencies": {
  "yorkie": "2.0.0"
},
"gitHooks": {
    "pre-commit": "npm run lint-staged",
    "pre-push": "npm run doctor"
  }

From the front-end perspective, the code base has the yorkie package installed. When git commit and git push are executed, the corresponding npm command will be executed. If we occasionally encounter some lint git commit --no-verify and don't want to fix it, we can quickly bypass the check through 06179ef160d3d6. That’s it, I don’t understand anything else

The essence of git hooks

git can trigger custom scripts when certain preset actions occur. .git/hooks are usually placed in the 06179ef160d3fc directory of the code library

Who does no-verify work for?

-- no-verify is the long option of the git command.

yorkie

yorkie can make it easier to configure git hooks in the warehouse. It is a fork to husky library, fine-tuned.

1. Better support for monorepo library
2. Change the location of hooks configuration in package.json

husky:

{
  "scripts": {
    "precommit": "foo"
  }
}

yorkie:

{
  "gitHooks": {
    "pre-commit": "foo"
  }
}

After learning git hooks and yorkie, I can now clearly describe the principle of git commit triggering eslint verification and card control before git push.

Take git commit as an example:

1. Execute the git commit command to trigger the pre-commit of git hooks
2. Execute the git-commit file under .git/hooks
3. Open the file and you can see that the runner.js of the yokie file is executed in the script
4. Trace it further and find that the runner.js file reads the gitHooks configuration of the package.json file

How i read yorkie code

Install the GitHub Repositories plugin. Add the corresponding code library.

Use local vscode to directly open the github code, there are many benefits.

advantage:

1. Keep using it, it is more convenient to jump
2. Downloading to the local is the most convenient, but it is easy to cause confusion in the local folder
3. No one finds out when fishing, this is irreplaceable by web browsing

shortcoming:

1. Unable to perform debugging locally
2. Limited by internet speed, occasionally file jumps will get stuck

The environment is ready, start reading the code.

When first contacting the code base, we first look at its package.json file. The two key entrances, install and uninstall, can infer that the git hooks file was written during package installation, and the write cleanup operation was performed during uninstallation.

We can read the bin/install.js file further and find that the key codes are all in the src/install.js file. Just read further, and after careful reading, I found that some file check and write operations are mainly done, which is just in line with our inference. I won’t go into it in depth for reasons of time, and I didn’t continue to read it in depth to clarify the truth. The general principle has also been introduced.

tips

The install and postinstall hooks should be equivalent.

Reading the yorkie source code for the first time is very confusing to the scripts -> install hook. Read the documentation repeatedly to know that install == postinstall

I'm a vegetable and anxious, but I haven't given up yet