Awesome Dev Tools To Automate Code Tasks 🔥

Photo by Barn Images on Unsplash

Introduction 🤔

Automation is awesome! It allows us to increase our productivity and achieve more in shorter amount of time. Thus, this article will teach you step-by-step how to install and use tools that automate processes which leave our limited attention span to focus on solving real challenges!

More specifically, we are going to learn how to:

• Format automatically our source code, following rules with unique style
• Build meaningful commit messages
• Take advantage of the power of Git Hooks
• Force our repository to accept specific structure of commits
• Ensure that source code will be committed properly formatted
• Automate new releases, generating versions, changelogs, Git tags, etc.

This article refers to any Git repository with Node.js, including Angular, React.JS, etc.

Prerequisites ⚡

• Prettier constitutes an opinionated code formatter which supports many languages and integrations with most code editors. It allow us to format automatically our code on save saving time and making sure our code have only one, unique and clean format style.
• Conventional Commits is a lightweight convention on top of commit messages, providing an easy set of rules for creating an explicit commit history; which makes it easier to write automated tools on top of.

<type>[optional scope]: <description>

[optional body]

[optional footer]

• Husky is a library that allows us to run specific commands and scripts at time of committing and pushing our code using Git hooks.
• Standard Version is a utility library for versioning using semver and CHANGELOG generation based on conventional commits of your repository.

In this tutorial, we will also use commitlint and pretty-quick libs to check if your commit messages meet the conventional commit format and run prettier on changed files respectively.

Install Prettier 🌺

First of all we are going to install Prettier in our the project.

Now let’s add some configuration files that specify rules and ignore files from prettier formatting.

In your project at root directory create two files with names .prettierrc and .prettierignore.

Last step is to install Prettier extension at VS Code. Open “Quick Open” ( CMD/ CTRL + P), paste the following command, and press enter.

Install Husky 🐕

Great, now try to write some code (without 🐛 😆), save your file and let the magic begin!

First, to install Husky in your project, you have to run the following command:

Then, run the command below in order to initialize the configuration files.

It will generate a new folder at root directory as depicted below:

In order to ensure that husky is going to be initialized each time that you install your project, add the following postinstall script at your package.json file.

Setup Git Hooks 🔀

Awesome, you made it so far! Let’s combine them together and setup our project. 😏

It’s time to add some scripts for:

• commit message validation that meet conventional commit format
• format with prettier the changed files before committing new code

Install all the required dev-dependencies, by running:

Open your project and create a new file with name commitlint.config.js under the root folder. Then copy/paste commitlint configuration in your new file as depicted below.

The next step is to tell Husky what command to execute on which Git Hook action. Create two files under the .husky folder with names commit-msg and pre-commit.

In order to validate commit messages on commit-msg Git Hook, we use commitlint command. This action allows us to verify if the new commit message meets the requirements of Conventional Commits specification.

If the commit message does not follow the rules, it will not allow us to commit our new code.

The second action that we want to achieve is to format our code automatically before we commit our code to the repository. We use pretty-quick command to format our code depending on the defined configuration that we have specified.

Also, we use --staged command flag to format only those files that are changed in our new commit.

[Optional] As final step, I recommend to install the Conventional Commits official plugin in your VS Code. It will help you to write structured commit messages through a step-by-step form without having to memorize all the rules.

Open “Quick Open” ( CMD/ CTRL + P), paste the following command, and press enter.

Once you have installed the plugin, open “Source Control” panel and click on the “circle” icon button at the top. A panel will appear and will guide you to write your commit message.

Although it may seem like a tedious process at first, it will help a lot and over time you will get used to it very easily writing well structured commit messages. 😉

Install Standard Version 📦

Before we proceed with the installation, let’s do a small recap. At the previous step, we saw how to format commit messages and how to enforce validation of them with Git Hooks.

So, our commits look like this:

Although it’s totally the best practice to follow specific message convention for your commits, it’s also the only requirement to be able to fully use the standard-version package.

In brief, standard-version undertakes to:

• Change versions at package.json and package-lock.json files
• Track changes from your commits and generate/update automatically CHANGELOG.md
• Commit changed files
• Create appropriate tags with versions at your repository

To install standard-version run:

Then, let’s create three scripts at our project. According to semver, we create one script for each version number (MAJOR.MINOR.PATCH).

Update your package.json file like:

Once you write some code and create 2–3 commits, try to run the following command:

We use the --dry-run command flag to demonstrate what commands would be run, without committing to git or updating files.

During your official release just run: npm run release

You will get an output similar to this:

You have created a new release version for your project. 👏

Keep in mind that you have a ton of options to customize according to your needs from the official documentation.

Conclusion ✅

Hooray! We made it to the end! 🙌

I hope you enjoyed this article and boost your projects with some magic. All aforementioned tools can help you to enrich the endless automation possibilities in an excellent way and make you and your team even more productive!

Please support this article with your ❤️ 🦄 🔖 to help it spread to a wider audience.

Also, don’t hesitate to contact me if you have any questions leaving here your comments or Twitter DMs @nikosanif.

Originally published at dev.to.