preface

When using vue Create my-app to create a project, Vue will automatically do some pre-configuration for us. You don’t have to use it, but when you need it, you suddenly realize that, wow, it has already done the preparatory work for me. You just need to configure it according to your own needs. Vue-cli is so sweet that it saves us a lot of time.

Json file you’ll find gitHooks, Lint-staged fields, etc. It’s easy to see that these are some additional actions (syntax hints, error hints, etc.) that are automatically performed when executing git commands.

What does the complete process look like?

Process analytical

Yorkie package

When the vue create command is executed, a package called: Yorkie, this package is fork from Husky, which has the same functionality: generate some hooks files that read the package.json configuration items in your project to execute commands, with some logic and configuration changes.

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

This script generates a number of Git hooks files in the. Git /hooks directory of your project:

When you execute git commands such as git push or git commit, Git will execute the corresponding hook.

package.json

Take git commit -a -m’123′ as an example. When executing this command, Git will execute the pre-commit hook.

To give you an idea of what package.json is:

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

pre-commit hook

Let’s look at the contents of the pre-commit file:

# #...
has_hook_script() {[-f package.json ] && cat package.json | grep -q "\"The $1\"[[:space:]]*:"
}
# Check if pre-commit is defined in package.json
has_hook_script pre-commit || exit 0

# running hook
node "./node_modules/yorkie/src/runner.js" pre-commit || {
  echo
  echo "pre-commit hook failed (add --no-verify to bypass)"
  exit1}Copy the code

Json file to check whether the package.json file defines a pre-commit, and if so, execute yorkie’s runner. Js script.

Yorkie’s runner. Js script

Let’s continue with 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).gitHooks
if(! hooks) { process.exit(0)}// From above, this value is pre-commit
const hook = process.argv[2]
// Take the gitHooks definition of pre-commit (" lint-passage ")
const command = hooks[hook]
if(! command) process.exit(0)
// Execute lint-staged commands
execa.shellSync(command, { stdio: 'inherit' })
Copy the code

When git commit -a -m’123′ is executed, git hook executes yorkie’s script to read package.json, fetch the configuration item, and execute the configuration item command.

In this example, lint-staged commands read “Lint-staged” configuration items from package.json and proceeded to execute VUE -cli-service Lint like a chain. Until all commands are executed.

practice

Now that you know the process, you have the flexibility to do some configuration on your project as required, such as adding commitlint to commit-msg hooks to normalize git information submitted by collaborators, and executing the previous example commands: Git commit -a -m’feat: 123′ git commit -a -m’feat: 123′

Similarly, lint-staged commands, used with pre-commit, can be added, such as pretty quick, to unify code formatting.

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"
  ]
}
Copy the code