• Ensure JavaScript Code Quality with Husky and Hooks
  • Viduni Wickramarachchi
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: Usualminds
  • Proofread: finalWhy, PassionPenguin

For a maintainable and extensible application, ensuring code quality is critical. But how do we enforce quality-related standards in our projects?

In JavaScript, you can use ESLint to define coding specifications, while Prettier can be used for uniform code style configuration. If you’ve configured these two tools, you’ve completed the first step in ensuring code quality.

Now that we have relevant quality standards, how do we enforce them? That’s where Husky comes in. In Git-based projects, Husky is often used to ensure compliance with quality standards. This is similar to the way that Bit enforces code specifications before a new version of a standalone component is released, and then exports to the various remote branches (more on this later).

What is the Hooks

When you initialize a project with Git (Git init), it automatically provides a function called Hooks. You can view it in the [project root]/.git/hooks.

You’ll see a lot of Git Hooks. Here are the parts:

  • pre-commitHooks to ensure that all coding specifications are executed before code is submitted. It will be in your executiongit commitRun at command time.
  • pre-push— Used to ensure that code conforms to coding specifications before being pushed to a remote repository.
  • pre-rebaseSimilar to the above, it is executed before the rebase operation completes.

All of the Hooks available and their usage can be found here.

However, writing these Hooks manually and ensuring that all developers follow them on their devices is an extremely tedious process. That’s where Husky comes in.

What is a Husky

Husky automates the Hooks addition process. When the dependencies in the project are installed, Husky ensures that all hooks will be installed on the developer’s device, based on the package.json configuration in the project. This makes it much easier to manage and distribute Hooks without having to write them manually.

Using Husky starts the following process:

  • Locally create Hooks.
  • The corresponding hook is automatically executed when the relevant Git command is invoked.
  • Coding specifications defined in the project are enforced for those who contribute to the project code.

Husky was used in the project

You can install Husky using the following command.

npm install husky --save-dev
Copy the code

Configuring Husky is very simple. This can be configured in package.json as follows.

"husky": {
  "hooks": {
    "pre-commit": "".// Add the pre-commit command here
    "pre-push": "".// Add the pre-push command here
    "...": "..."}}Copy the code

Like this, you can configure any hooks you need here.

Let’s look at an example.

If you want to make sure your code meets all lint rules before committing your changes, go to the following steps.

{
  "scripts": {
    "lint": "eslint . --ext .js",},"husky": {
    "hooks": {
      "pre-commit": "npm run lint"}}}Copy the code

This configuration should be added to package.json. This ensures that code cannot commit to Git without esLint validation.

More Husky in practice

So far, we’ve learned the basics of how to use Husky. Can we do more with this bag? Let’s see.

  1. Husky can run any command, and it can work in combination with other packages (formatting with Prettier, performing static analysis of code files ready for submission, etc.).
  2. Husky is able to verify that submitted information is used, etccommit-msg, similar to thepre-commitVerification rules.
  3. We can usepre-commitThe command runs all unit and integration tests, which ensures that no destructive changes are committed.

Note, however, that if you use the no-verify flag in your Git command, you can skip the Husky command.

Support the Hooks

Husky supports all of the Git Hooks defined here. Server Hooks (pre-receive, update, and post-receive) these are not supported.

Husky characteristics

Here I want to mention a few salient features of Husky.

  • Zero dependence and Lightweight (6KB)
  • With the latest Git features (core.hooksPath) drive
  • Follow best practices for NPM and Yarn automatic installation
  • User-friendly message prompt
  • Optional installation
  • Husky 4 supports macOS, Linux, and Windows platforms
  • Further, it supports Git GUI, custom directories, and Monorepos

conclusion

Use Husky and Git Hooks to implement error-free code builds formatted to lint validation rules. This makes implementing coding specifications very simple and fast.

Alternatively, you can consider using a tool like Bit to improve code quality.

From the day I started using Husky on my projects (small-scale or enterprise-level), coding life got a lot easier.

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.