Ensuring Consistent Code Quality with Linting at Every Commit
In the development world, it's common for anyone to make mistakes and occasionally overlook coding standards. These lapses can occur at any stage of the development cycle, potentially leading to issues such as:
- Failed Deployments: When linting is enforced during the build and deployment process, even a minor missed rule can halt the deployment, wasting valuable build time and resources.
- Reduced Readability: As standards are neglected, code quality can deteriorate, making it harder for developers to maintain consistency. Over time, this accumulation of small oversights can lead to confusion and errors, compromising the overall readability of the code.
Here’s an easy way to ensure that everything pushed to your repository is always lint-free by linting at every commit. This approach automates the process, reducing the risk of forgetting to run linting manually and making your development workflow seamless. This is where Husky and Git hooks come in. Husky simplifies the setup of Git hooks, which allow you to introduce commands at specific stages of your Git workflow, ensuring consistency and quality throughout your development process.
Integrating Husky and Git Hooks Into Your XM Cloud Project
In this section, we will explore one approach to integrating this setup into your project. Below are the objectives and limitations of the configuration we will implement:
- Node Modules: In a headless project, node modules are typically not set up at the root level, which can pose a challenge when configuring this. You have two options: either install the required packages at the root level and add additional folders and files at that level, or configure Husky to run within your frontend folder. For our example, we assume the project consists of a single site, so we aim to avoid installing dependencies at the root level to minimize the complexity of the project setup.
- Single Site Setup: This setup has a key limitation depending on the scope of your project. For handling multiple sites, I’ll be sharing a separate blog post on how to configure this, but it will require installation at the root level. This approach provides a better balance for handling larger projects with multiple sites.
Configuring Git for Husky Hooks in the Frontend Folder
The first challenge we will be facing is having the hook be located inside your frontend folder. When we set up Husky it creates a folder and that folder’s path is where the Git Hook is located. Since this is not in the root folder we will need to configure Git.
Configuring Your Git Hook Path
Run this command on your repository’s root folder to configure the git hook path:
git config core.hooksPath headapps/nextjs-starter/.husky
For updated XM Cloud projects, your child frontend folder may be located at headapps/nextjs-starter and older versions may have it at src/nextjs-starter. You can easily check if the path is correct by running the command.
git config --get core.hooksPath
Configuring Husky
First, navigate to your frontend folder and install Husky:
npm install --save-dev husky
Next, initialize the necessary files that Husky will create by running the following command:
npx husky init
Before testing a commit, we need to make a small adjustment that deviates from the default setup in Husky's "Get Started" documentation. Open your package.json file and locate the prepare script. It should look like this:
"prepare": "husky"
Since we need to run the hook from the root folder and the path to the pre-commit file differs, we’ll need to adjust this. Modify the prepare script to:
"prepare": "cd ../.. && husky src/nextjs-starter/.husky"
Next, run the following command.
npm run prepare
This will add a few more files to your .husky folder, indicating that the configuration was successful:
.husky/
├── _ // Some additional files for git hooks
└── pre-commit
We forgot the main point to this guide, the actual pre-commit command we need to run! Navigate to your .husky folder and open the pre-commit file. You can then configure what command you want to run. Here’s a simple command you could start off with. It will run the linter of your project which you should be already doing.
npm run lint
Checking if the Pre-Commit Actually Works
Depending on how you’re running your git commit you will then get an error and it will tell you that the lint failed. Here’s a sample error message you might get if your lint fails.
C:\Users\John\Projects\nextjs-starterkit\src\tsask\src\Layout.tsx
93:1 error Delete `␍⏎··␍⏎` prettier/prettier
✖ 1 problem (1 error, 0 warnings)
1 error and 0 warnings potentially fixable with the `--fix` option.
husky - pre-commit script failed (code 1)
Ensuring Code Quality with Husky: A Setup for Consistent Commits
With this setup, you may have added a few extra seconds to each commit, but it ensures your code meets the required standards and reduces the chances of deployments failing due to linting errors. Stay tuned for an upcoming guide on how to configure this for projects with multiple sites.
