Prettier and lint your project with husky and git hooks
Tags: github, javascript, git, githubactions
Published: 2023-08-25 13:18:00

**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

{% details Read more... %} 


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: https://leonardomontini.dev/typescript-github-action/

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](https://github.com/Balastrong/ga-label-issue), so you can always refer to it if you get stuck.

{% enddetails %}

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

{% youtube N26xgQ7kLKo %}

## 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](https://typicode.github.io/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](https://typicode.github.io/husky/getting-started.html) and install it:

```bash
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:

```bash
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](https://prettier.io/) and [ESLint](https://eslint.org/):

```bash
npm install -D prettier eslint lint-staged
```

We will also need to install some plugins for ESLint:

```bash
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:

```json
{
  "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:

```json
{
  "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:

```json
{
  "./src/**/*.{js,ts}": ["prettier --write", "eslint --max-warnings 0"]
}
```

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

```bash
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](https://github.com/Balastrong/ga-label-issue) 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:

{% youtube N26xgQ7kLKo %}

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](https://twitter.com/balastrong).

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:
[![YouTube](https://img.shields.io/badge/YouTube:%20Dev%20Leonardo-FF0000?style=for-the-badge&logo=youtube&logoColor=white)](https://www.youtube.com/channel/UC-KqnO3ez7vF-kyIQ_22rdA?sub_confirmation=1)

Feel free to follow me to get notified when new articles are out ;)
{% embed https://dev.to/balastrong %}