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

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

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

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

We will also need to install some plugins for ESLint:

npm install -D @typescript-eslint/eslint-plugin@latest eslint-plugin-jest@latest

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"]
}

Let's also add a .prettierrc file:

{
  "trailingComma": "es5",
  "printWidth": 120,
  "tabWidth": 2
}

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"]
}

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

npx husky add .husky/pre-commit "npx lint-staged"

One more npm install and we're done!

Closing

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: https://discord.gg/bqwyEa6We6

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 ;)

Leonardo MontiniFollow

I talk about Open Source, GitHub, and Web Development. I also run a YouTube channel called DevLeonardo, see you there!