Intro to Git Hooks

A presentation at She Builds Black: Intro to Git Hooks in March 2019 in New York, NY, USA by Monica Powell

Slide 1

Slide 1

SHE BUILDS BLACK | MONICA POWELL INTRO TO GIT HOOKS

Slide 2

Slide 2

INTRO TO GIT HOOKS INTRODUCTION Monica Powell, I’m a Full Stack Engineer at Meetup and organizer of the React Ladies Meetup group. I’ve written about git and other tech adventures in publications such as FreeCodeCamp, Hacker Noon and Code Like A Girl. ! Twitter: @waterproofheart 🔗 www.aboutmonica.com/ 🐌 monica@aboutmonica.com Monica Powell • She Builds Black • March 2018 @waterproofheart • www.aboutmonica.com

Slide 3

Slide 3

INTRO TO GIT HOOKS FOLLOW ALONG ▸ GitHub Repository ▸ https://github.com/M0nica/git-hooks-workshop Monica Powell • She Builds Black • March 2018 @waterproofheart • www.aboutmonica.com

Slide 4

Slide 4

INTRO TO GIT HOOKS GIT - VERSION CONTROL SOFTWARE Monica Powell • She Builds Black • March 2018 @waterproofheart • www.aboutmonica.com

Slide 5

Slide 5

INTRO TO GIT HOOKS WHAT’S A GIT HOOK Monica Powell • She Builds Black • March 2018 @waterproofheart • www.aboutmonica.com

Slide 6

Slide 6

INTRO TO GIT HOOKS WHAT’S A GIT HOOK Monica Powell • She Builds Black • March 2018 Image Source: Atlassian @waterproofheart • www.aboutmonica.com

Slide 7

Slide 7

INTRO TO GIT HOOKS WHAT’S A GIT HOOK ▸ Bash scripts that are executed at specific points within the git workflow. ▸ precommit, postcommit, prepush, postpush, etc…. ▸ Git Hooks Documentation: ▸ https://git-scm.com/docs/githooks Monica Powell • She Builds Black • March 2018 @waterproofheart • www.aboutmonica.com

Slide 8

Slide 8

INTRO TO GIT HOOKS HOW CAN GIT HOOKS BE USED? ▸ Warn when committing to master ▸ Run linting and tests before committing ▸ Warn or abort when committing code with console.logs(), sensitive credentials, merge conflict strings or large files. ▸ Send notifications after a commit is pushed ▸ And 1270824+ other ways Monica Powell • She Builds Black • March 2018 @waterproofheart • www.aboutmonica.com

Slide 9

Slide 9

INTRO TO GIT HOOKS HOW CAN GIT HOOKS BE USED? ▸ Warn when committing to master ▸ Run linting and tests before committing ▸ Warn or abort when committing code with console.logs(), sensitive credentials, merge conflict strings or large files. ▸ Send notifications after a commit is pushed ▸ And 1270824+ other ways Monica Powell • She Builds Black • March 2018 @waterproofheart • www.aboutmonica.com

Slide 10

Slide 10

INTRO TO GIT HOOKS HOW CAN GIT HOOKS BE USED? ▸ Warn when committing to master ▸ Run linting and tests before committing ▸ Warn or abort when committing code with console.logs(), sensitive credentials, merge conflict strings or large files. ▸ Send notifications after a commit is pushed ▸ And 1270824+ other ways Monica Powell • She Builds Black • March 2018 @waterproofheart • www.aboutmonica.com

Slide 11

Slide 11

INTRO TO GIT HOOKS LIMITATIONS ON ENFORCEMENT ▸ —no-verify ▸ Local hooks != shared hooks ▸ .git/hooks not in version control Monica Powell • She Builds Black • March 2018 @waterproofheart • www.aboutmonica.com

Slide 12

Slide 12

INTRO TO GIT HOOKS LET’S SET UP A PLAYGROUND ‣Fork https://github.com/M0nica/git-hooks-workshop ‣yarn ‣yarn husky ‣yarn eslint —init touch ‣index.js Monica Powell • She Builds Black • March 2018 @waterproofheart • www.aboutmonica.com

Slide 13

Slide 13

INTRO TO GIT HOOKS LET’S AUTOMATE LINTING OUR CODE Add index.js with bad styling that should fail ESLint const nameChecker = function (name) { if (name == ‘Cardi’) { console.log(‘Party with Cardi’); } function doSomething() { console.log(‘do something’); } }; Monica Powell • She Builds Black • March 2018 @waterproofheart • www.aboutmonica.com

Slide 14

Slide 14

INTRO TO GIT HOOKS LET’S SET UP A PLAYGROUND ‣Fork https://github.com/M0nica/git-hooks-workshop ‣Add to package.json and then run yarn lint “scripts”: { “lint”: “eslint . —ext .js,.jsx —fix” }, Monica Powell • She Builds Black • March 2018 @waterproofheart • www.aboutmonica.com

Slide 15

Slide 15

INTRO TO GIT HOOKS LET’S SET UP A PLAYGROUND ‣Fork https://github.com/M0nica/git-hooks-workshop ‣Add to package.json and Add linting hook to enforce eslint rules and then ‣ Try to commit changes with ill-formatted JavaScript to index.js “husky”: { “hooks”: { “pre-commit”: “yarn lint”, “pre-push”: “yarn lint” } }, Monica Powell • She Builds Black • March 2018 @waterproofheart • www.aboutmonica.com

Slide 16

Slide 16

INTRO TO GIT HOOKS LET’S SET UP A PLAYGROUND ‣ View sample git hooks in .git/hooks directory ‣ Edit the pre-commit hook (can use this example: https:// github.com/M0nica/git-hooks-workshop/blob/master/ prepush.sample) ‣ Push to the master branch and see what happens Monica Powell • She Builds Black • March 2018 @waterproofheart • www.aboutmonica.com