Sharing hooks with the team (husky) in Git - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to install Husky in your project.

Git

npm install [1] --save-dev

Drag options to blanks, or click blank then click option'

Ahusky

Beslint

Cwebpack

Dbabel

Attempts:

3 left

💡 Hint

Common Mistakes

Installing the wrong package like eslint or webpack.

Forgetting to add --save-dev to save as a development dependency.

Husky is installed as a development dependency using npm install husky --save-dev.

2fill in blank

medium

Complete the command to initialize Husky in your project.

Git

npx husky [1]

Drag options to blanks, or click blank then click option'

Asetup

Binit

Cstart

Dinstall

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'init' or 'start' instead of 'install'.

Not running this command after installing Husky.

Use npx husky install to set up Husky hooks in your project.

3fill in blank

hard

Fix the error in the command to add a pre-commit hook that runs tests.

Git

npx husky add .husky/pre-commit "[1]"

Drag options to blanks, or click blank then click option'

Anpm test

Bnpm start

Cnode server.js

Dgit commit

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'npm start' which runs the app instead of tests.

Trying to run 'git commit' inside the hook.

The pre-commit hook should run tests, so the command is npm test.

4fill in blank

hard

Fill both blanks to add a pre-push hook that runs lint and format checks.

Git

npx husky add .husky/pre-push "[1] && [2]"

Drag options to blanks, or click blank then click option'

Anpm run lint

Bnpm run test

Cnpm run format

Dnpm start

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'npm run test' instead of lint or format.

Using 'npm start' which runs the app.

The pre-push hook runs lint and format checks using npm run lint and npm run format.

5fill in blank

hard

Fill all three blanks to add a prepare script in package.json that installs Husky and sets up Git hooks.

Git

"prepare": "npm [1] husky && npx husky [2] && npx husky [3]"

Drag options to blanks, or click blank then click option'

Ainstall

Cadd .husky/pre-commit 'npm test'

Dinit

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'init' instead of 'install' for setting up Husky.

Forgetting to add the pre-commit hook command.

The prepare script installs Husky, runs husky install, and adds a pre-commit hook to run tests.

Practice

1. What is the main purpose of using Husky in a Git project?

easy

A. To share Git hooks easily with the whole team

B. To create new Git branches automatically

C. To merge pull requests without conflicts

D. To backup the Git repository to the cloud

Solution

1. Step 1: Understand what Git hooks do

   Git hooks are scripts that run at certain points in Git workflows, like before commits.

2. Step 2: Identify Husky's role

   Husky helps share these hooks easily among team members by managing them in the project.

3. Final Answer:

   To share Git hooks easily with the whole team -> Option A

4. Quick Check:

   Husky = Share Git hooks [OK]

Hint: Husky = sharing Git hooks with team [OK]

Common Mistakes:

• Thinking Husky manages branches
• Confusing Husky with backup tools
• Assuming Husky merges pull requests

2. Which command correctly installs Husky hooks in your Git project?

easy

A. npm install husky

B. git husky add

C. husky install

D. husky init

Solution

1. Step 1: Recall Husky installation steps

   First, you install Husky as a package (e.g., npm install husky), then you run husky install to set up Git hooks.

2. Step 2: Identify the command that sets up hooks

   The command husky install creates the hooks folder and configures Git to use Husky hooks.

3. Final Answer:

   husky install -> Option C

4. Quick Check:

   Setup hooks = husky install [OK]

Hint: Use 'husky install' to set up hooks folder [OK]

Common Mistakes:

• Using 'npm install husky' as hook setup
• Trying 'git husky add' which is invalid
• Confusing 'husky init' with 'husky install'

3. Given the commands below, what will be the result?

npm install husky
npx husky install
npx husky add .husky/pre-commit "npm test"
git commit -m "test commit"

medium

A. The commit will fail because the hook is not installed

B. The pre-commit hook runs 'npm test' before the commit

C. The commit message will be ignored

D. The pre-commit hook runs 'git status' before the commit

Solution

1. Step 1: Analyze the commands

   First, Husky is installed. Then hooks are installed with husky install. Next, a pre-commit hook is added to run npm test.

2. Step 2: Understand the effect on commit

   When git commit runs, the pre-commit hook triggers npm test before allowing the commit.

3. Final Answer:

   The pre-commit hook runs 'npm test' before the commit -> Option B

4. Quick Check:

   pre-commit runs npm test [OK]

Hint: Add hook with 'husky add' to run commands pre-commit [OK]

Common Mistakes:

• Assuming hooks run after commit
• Forgetting to run 'husky install'
• Confusing hook commands with commit messages

4. You committed the .husky folder but your teammate's hooks are not running. What is the most likely cause?

medium

A. They forgot to run husky install after pulling

B. The .husky folder is ignored by Git

C. Hooks only work on Windows, not Linux

D. Git does not support hooks in shared repos

Solution

1. Step 1: Understand sharing hooks with Husky

   Even if the .husky folder is committed, each user must run husky install locally to activate hooks.

2. Step 2: Identify the common setup mistake

   If teammates don't run husky install, hooks won't be linked to Git and won't run.

3. Final Answer:

   They forgot to run husky install after pulling -> Option A

4. Quick Check:

   Run husky install locally to activate hooks [OK]

Hint: Run 'husky install' after pulling to activate hooks [OK]

Common Mistakes:

• Assuming committed hooks auto-activate
• Thinking hooks don't work on Linux
• Believing Git disables hooks in shared repos

5. Your team wants to share a pre-push hook that runs tests before pushing. Which steps correctly set this up using Husky?

hard

A. Run git hook add pre-push npm test and push changes

B. Add pre-push: npm test in package.json, no other steps needed

C. Create a script named pre-push.sh and add it to .git/hooks manually

D. Run npx husky add .husky/pre-push "npm test", commit .husky, teammates run husky install

Solution

1. Step 1: Add the pre-push hook with Husky

   Use npx husky add .husky/pre-push "npm test" to create the hook script that runs tests before push.

2. Step 2: Share and activate hooks

   Commit the .husky folder so teammates get the hook, and they must run husky install locally to activate it.

3. Final Answer:

   Run npx husky add .husky/pre-push "npm test", commit .husky, teammates run husky install -> Option D

4. Quick Check:

   Add hook, commit folder, teammates install hooks [OK]

Hint: Add hook with husky add, commit folder, teammates run husky install [OK]

Common Mistakes:

• Editing package.json instead of using husky add
• Manually adding scripts to .git/hooks (not shared)
• Using invalid git commands for hooks