preface

When I looked at the Vue CLI documentation, I found that there is a Git Hook under the CLI service.

After installation, @vue/cli-service also installs Yorkie, which lets you easily specify Git hooks in the Package. json gitHooks field:

{
  "gitHooks": {
    "pre-commit": "lint-staged"}}Copy the code

Yorkie is a fork from Husky, built into @vue/ CLI.

Githook was using Husky when I was building the Vue shelf, so the question is why should I install husky again when @vue/ CLI is already built in, hence the following story.

The story

An extra husky sounds redundant to me. Maybe it’s ocD. So I went to package.json and removed the “husky”: “^1.3.1”, which made it a lot more comfortable

Open husky.config.js, copy, and delete

module.exports = {
  hooks: {
    'pre-commit': 'npm run fix'.'commit-msg': 'commitlint -E HUSKY_GIT_PARAMS'}};Copy the code

Open package.json, paste it, and modify it slightly

{
  "gitHooks": {
    "pre-commit": "npm run fix"."commit-msg": "commitlint -E HUSKY_GIT_PARAMS"}}Copy the code

Accomplished, tentative operation 👀

git commit -m "test"
Copy the code

Result: Success!

I’m a genius, ha ha. Wait, success? Fix did not work, commitLint did not work.

A little thought

The gitHook file is stored in.git/hooks

Open. Git/hooks/commit – MSG

#! /bin/sh
# husky

# Hook created by Husky
# Version: 1.3.1
# At: 2019-4-10 21:26:25
# See: https://github.com/typicode/husky#readme.Copy the code

Hushy? Wasn’t it deleted? Is it because the deletion pose is incorrect?

npm uninstall husky
Copy the code

Git /hooks/commit- MSG has been deleted.

A retest

git commit -m "test"
Copy the code

Result: Success! It’s so hard to watch a failure.

Think again

Git /hooks were changed when husky was installed. Git /hooks will be changed when the project is created using @vue/cli, so installing Yorkie will also be changed.

npm i yorkie
Copy the code

Look. The git/hooks/commit – MSG

#! /bin/sh
# yorkie 2.0.0

command_exists () {
  command -v "The $1" >/dev/null 2>&1
}

...
Copy the code

And so it was. The third time

git commit -m "test"
Copy the code

Result: failure! Finally failed.

Error: Recieved 'HUSKY_GIT_PARAMS' as value for -E | ...
Copy the code

The environment variable here is forgotten and not found in Yorkie. Git /hooks/commit- MSG: GIT_PARAMS

End result: Fix works, commitLint works.

Done 👏👏👏

Calm analysis

  • Tools like Husky create hooks at install time
  • npmininstallanduninstallCan execute the script –Npm-scropts in Case you Didn’t know
  • Delete dependencies not inpackage.jsonIs directly deleted, instead of usingnpm uninstallTo delete
  • Read more official documents and you’ll find a lot of surprises
  • Try more when you encounter problems, document and source code, and you’re done

The resources

  • Vue CLI official document
  • Git official documentation hook section
  • Yorkie warehouse
  • Husky warehouse
  • Vue – cli warehouse