Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "how to create gitHooks in the project of vue-cli". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

In the package.json file will find gitHooks, lint-staged and other fields, it is not difficult to see that it is when we execute the git command will automatically perform some additional operations, such as syntax prompts, error prompts, and so on.

What is the complete process?

Process analysis

Yorkie package

When executing the vue create command, it will install a package called yorkie, this package is from husky of Uda fork, its function is the same, both generate some git hooks files, read the relevant configuration items of package.json in the project to execute some commands, the difference is that Yoda has made some logic and configuration changes.

After installing this package, a script in the yorkie package is automatically executed: bin/install.js:

This script will generate a lot of git hooks files in the .git / hooks directory under your project:

When you execute some git commands, such as git push, git commit, etc., git will execute the corresponding hook.

Package.json

Take the command git commit-a-m upload 123' as an example. When you execute this command, git will execute the hook of pre-commit.

First post the relevant content of package.json to give you an impression:

"gitHooks": {"pre-commit": "lint-staged",}, "lint-staged": {"*. {js,jsx,vue}": ["vue-cli-service lint", "git add"]}

Pre-commit hook

Next, let's take a look at the contents of the pre-commit file:

# #... has_hook_script () {[- f package.json] & & cat package.json | grep-Q "\" $1\ "[[: space:]] *:"} # check whether pre-commithas_hook_script pre-commit is defined in the package.json file | | exit runs hook node ". / node_modules/yorkie/src/runner.js" pre-commit | | {echo echo "pre-commit hook failed (add-- no-verify to bypass)" exit 1}

You can see the pre-commit file to check to see if pre-commit is defined in the package.json file, and if so, execute the runner.js script for yorkie.

Runner.js script for yorkie

Let's move on to the contents of the runner.js script:

/ /... const cwd = process.cwd () const pkg = fs.readFileSync (path.join (cwd, 'package.json')) / / fetch the gitHooks content defined in package.json const hooks = JSON.parse (pkg). GitHooksif (! hooks) {process.exit (0)} / / from the above, this value is pre-commitconst hook = process.argv [2] / / fetch the content of pre-commit defined in gitHooks Also get: lint-stagedconst command = hooks [hook] if (! command) process.exit (0) / / execute the lint-staged command execa.shellSync (command, {stdio: 'inherit'})

From this process, we can see that when we execute the git command git commit-a-masks 123', git hook executes a script from yorkie to read the contents of the package.json file, fetch the relevant configuration items, and then execute the commands in the configuration items.

In the above example, because the lint-staged command is executed, it reads the "lint-staged" configuration item in package.json, and then continues to execute the vue-cli-service lint command, which is like a chain until all the commands are executed.

Practice

After understanding this process, you can flexibly do some configuration according to the requirements in the project, such as adding commitlint when performing commit-msg hook, standardizing the git information submitted by the collaborators, and after this, the implementation of the previous example command: git commit- a-m submission 123' will have a non-standard error prompt to submit information, according to the prompt to: git commit- a-m'feat: 123' can be submitted.

Similarly, lint-staged used with pre-commit can also be used with some commands, such as adding pretty-quick to unify the code format.

Example:

"gitHooks": {"pre-commit": "lint-staged", "commit-msg": "commitlint-E GIT_PARAMS"}, "lint-staged": {"*. {js,jsx,vue}": ["pretty-quick-- staged", "vue-cli-service lint", "git add"]} "gitHooks in the project how to create vue-cli" ends here. Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.