DEV Community

Cover image for Prettier and lint your project with husky and git hooks
Leonardo Montini
Leonardo Montini

Posted on

Prettier and lint your project with husky and git hooks

GitHub Actions are a powerful tool to automate your workflow. They can be used to run tests, deploy your code, publish a package, and much more.

The cool thing is, there's a GitHub Actions Marketplace where you can find a lot of actions created by... the community.

But what if you can't find the action you need? You can create your own and publish it there!

How to use this tutorial


In this tutorial we're going to see in detail how to:

  • Create a GitHub Action in Typescript
  • Expand our Action to support custom inputs
  • Integrate with GitHub's API to add labels to Pull Requests
  • Unit testing our action
  • Debugging in Visual Studio Code
  • Publishing our action to the GitHub Marketplace
  • Using our action in another repository
  • Some final touches to make our project more robust

The articles will be split into separate bite-sized chapters as technically each one can be a little tutorial by itself.

If you're interested in the full text all at once, you can find it here:

One more great piece of advice is to create a new repository and follow along with the steps. This way you'll have a working action at the end of the post and you'll be able to play with it and experiment, rather than just reading a long tutorial and forgetting about 90% of it.

The full code of this tutorial is available on GitHub on this repo, so you can always refer to it if you get stuck.

The full tutorial (all chapters at once) is also available as a video, which you can find here:

Chapter 8: Final touches

The action is complete, it's live in the store and it works on all GitHub repositories, but unless it's 100% complete and you won't ever update it again, you still have some room for improvements for a better developer experience (DX is quite trending these days).

Keeping dist up to date

One thing which will annoy you in this workflow is pushing new code and forgetting to also update the dist content.

I mean, all you have to do is just make sure to run npm run build before pushing, but if something relies on "just remember to do it"... well... good luck!

A simple way to solve this is to use a git hook. You can use the pre-commit hook to run a script at each commit in your repository. This will work for you, but what if you're working with other people? Ah, just kindly tell them to install the hook as well... did I already say good luck?


A Dog?

Yes, specifically a Husky!

Husky is a tool which allows you to easily add git hooks to your project. It's very easy to set up and it will make sure that everyone who clones your repo will have the hooks installed as well, as they are part of the project and get installed with the dependencies, right after running npm install. No need to rely on people remembering to install them!

Let's follow the official docs and install it:

npx husky-init && npm install
Enter fullscreen mode Exit fullscreen mode

You will now find a .husky folder in your project, with a pre-commit file in it. Open it and replace the content with this:

npm run build
Enter fullscreen mode Exit fullscreen mode

Now make sure to run npm install once to update the hook. This will make sure that every time you commit, the dist folder will be updated.

Formatting & Linting

Since we already set up our pre-commit hook, we can also add some formatting and linting to it.

This will make sure that the code is always properly formatted and that there are no linting errors.

Let's install Prettier and ESLint:

npm install -D prettier eslint lint-staged
Enter fullscreen mode Exit fullscreen mode

We will also need to install some plugins for ESLint:

npm install -D @typescript-eslint/eslint-plugin@latest eslint-plugin-jest@latest
Enter fullscreen mode Exit fullscreen mode

We can now configure eslint and prettier. Create a .eslintrc file in the root of your project and add the following content:

  "plugins": ["jest", "@typescript-eslint"],
  "parser": "@typescript-eslint/parser",
  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
  "env": {
    "node": true,
    "jest/globals": true
  "ignorePatterns": ["*.test.ts"]
Enter fullscreen mode Exit fullscreen mode

Let's also add a .prettierrc file:

  "trailingComma": "es5",
  "printWidth": 120,
  "tabWidth": 2
Enter fullscreen mode Exit fullscreen mode

Last touch, we want to run these two only on the staged files, which means one more config file for lint-staged. Create a .lintstagedrc file and add the following content:

  "./src/**/*.{js,ts}": ["prettier --write", "eslint --max-warnings 0"]
Enter fullscreen mode Exit fullscreen mode

Now we can update our pre-commit hook to run lint-staged as well:

npx husky add .husky/pre-commit "npx lint-staged"
Enter fullscreen mode Exit fullscreen mode

One more npm install and we're done!


If you followed all steps, you now have a pretty solid GitHub Action, published in the GitHub Marketplace, which is automatically built and linted on each commit. Ready to make a great Open Source project!

If you want to see the final result, you can check out the GitHub Action I created while writing this article. You can also use it as a reference if you missed some steps.

Want to see me following along the steps in this article? Check out the video here:

What else to say? I hope you enjoyed this series and that you learned something new. If you have any questions, feel free to add a comment below or reach out to me on Twitter.

This was much longer than usual, I had a lot of fun writing each chapter and I learned a lot myself in the process. Would you like more series like this one? Let me know!

See you next time!

Thanks for reading this article, I hope you found it interesting!

I recently launched my Discord server to talk about Open Source and Web Development, feel free to join:

Do you like my content? You might consider subscribing to my YouTube channel! It means a lot to me ❤️
You can find it here:

Feel free to follow me to get notified when new articles are out ;)

Top comments (1)

pavelee profile image
Paweł Ciosek

Cool! I was looking for those kind of improvements, thanks