In my previous post, I have written down the steps which will help you to configure ESLint and Prettier in Visual Studio Code to make your JavaScript development easy and making sure code syntax, as well as best practices, are being followed. If you haven't seen that post, I highly recommend you go through that at - Configure ESLint and Prettier in VS Code for JavaScript Development.
Today I am going to talk about another important tool when you are dealing with committing your JavaScript code in Git repository. It's called Husky.
From this post, you can expect -
- Problems that Husky can solve
- Quick introduction of husky
- Configure Husky in Visual Studio Code
- Examples
Problems that Husky can solve
So far by installing ESLint and Prettier we have the option to run the script which will check for syntax and best practices in our JavaScript code. But what about if we forget to execute this script before committing our changes to the GitHub repository? We will be then committing poorly written code into our repo. We can always run ESLing and Prettier as part of our continuous integration, but having a problem identified at that stage is kind of late in the game. We need to fix now and do another commit.
So it will be good if we can identify these problems even before we do the first commit. And here comes the power of Husky.
Quick Introduction of Husky
Husky is responsible for creating git hooks. Git hooks are scripts that git will execute before or after the events as per your configuration. So in our situation, we will be writing git hooks with husky which will execute eslint before every commit.
Configure Husky in Visual Studio Code
Step 1 - Install Husky
The first thing we need to do is to install Husky as dev dependencies. You can do that by executing the below command from your terminal.
"npm i -D husky".
Once the command executes successfully, husky will be added as a dev dependency in the package.json file.
Step 2 - Create git hook
You can create git hooks for husky by adding the below stuffs in your package.json.
"husky": {
"hooks": {
"pre-commit": "npm run lint -- -- src"
}
}
Basically, you are telling husky to run lint on the src folder before every commit. So if there is any complaint by lint, the actual commit will not happen.
You can get the full husky git options here.
Examples
Now let's create a new JavaScript file called HelloCanada.js and make sure ESLint through error message for that file. Here is the file -
var HelloCanada
console.log('Hello from Canada')
When we try to commit the file, the error will appear and the actual commit will fail. Below is the screenshot of the error message -
As you can see, husky ran the lint command and as it found some error, the actual commit stopped.
0 Comments