How to Prevent Bad Git Commits with Lint-staged

Git hooks to prevent bad commits.

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

This lesson preview is part of the Creating React Libraries from Scratch course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to Creating React Libraries from Scratch, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course Creating React Libraries from Scratch

  • [00:00 - 00:08] Linstage is a tool that prevents bad code from leaving a developer's computer. It allows us to run commands on stage files when the developer runs Git commit.

    [00:09 - 00:21] If any of the commands fail, then the commit also fails, preventing bad commits from being pushed to GitHub. Linstage is a great way of ensuring linting, testing, and other operations performed before contributions get pushed to GitHub.

    [00:22 - 00:37] Run npx mrm at 2 lint-staged at the root of scroller. Since we need to use the mrm at 2 script, which is a remote script, we need to use mpx and so do r.

    [00:38 - 00:47] Enter y or yes to proceed when prompted. This adds lint stage and husky as a dev dependency, and a dot husky directory which could be ignored.

    [00:48 - 00:59] lint stage also adds a lint stage property into our package.json file, where we will define what scripts we want to run before Git commit is ran. lint stage defaults with a star.js which runs es lint.

    [01:00 - 01:08] This runs es lint on change JavaScript files. We'll be updating this later to l int TypeScript files and run our tests. lint stage only runs on stage files.

    [01:09 - 01:19] Each command in the lint stage section of our package.json file gets a list of files as arguments. For example, if 1.js and 2.js were created and we tried to commit those files to git.

    [01:20 - 01:28] es lint would run the following command. es lint -cache-fix 1.js and then 2.js. We want linting to run on our TypeScript files instead.

    [01:29 - 01:37] So update the star.js and pax.json to be star.ts. Stage a TypeScript file and get using git add and then some TypeScript file.

    [01:38 - 01:42] Then run git commit. If you see es lint ran, then lint stage is correctly configured.

    [01:43 - 01:50] We'll update lint stage to also run just on commits. Since just will automatically fail if no tests are given, which could be the case when running tests in only stage files.

    [01:51 - 01:58] We need to provide the -pass with no test flag. In pax.json update the star.ts to be an array containing es lint.

    [01:59 - 02:11] Still with the -cache-cache and -fix and then add another entry for just with - pass with no tests. Given an array to lint stage runs commands and sequence, the single command fails then the commit is rejected.

    [02:12 - 02:16] This is a set of tests that can be used in the previous video. We're going to be able to make this tutorial for the next tutorial.

    [02:17 - 02:23] We'll be able to make a tutorial for the next tutorial. We'll be able to make a tutorial for the next tutorial.