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
, includingAngular
,React.JS
, etc.
-
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.
First of all we are going to install Prettier in our the project.
https://gist.github.com/a653e95f99c008fa96b88e16728abbea
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
.
https://gist.github.com/4c79b90cba604dc3f859fed554f93272
https://gist.github.com/a15aa557906c6655653f4aac81300430
Last step is to install Prettier extension at VS Code. Open "Quick Open" (CMD
/CTRL
+ P
), paste the following command, and press enter.
https://gist.github.com/cc27927e68aa8dc2a935f8e15e9383e1
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:
https://gist.github.com/3790caa05fd091e4f62e0e8bead99182
Then, run the command below in order to initialize the configuration files.
https://gist.github.com/041b0dcf2c6b48d2be3f6822b6218fa6
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.
https://gist.github.com/7daccc722a117af418a4adc6f369e10f
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:
https://gist.github.com/a7ffbaa75cb9c026d6c5792028d95397
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.
https://gist.github.com/1c2c14bb725ba576d9d642a3cac93c32
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.
https://gist.github.com/450cd88b7129dd9a68b93dadf461645e
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.
https://gist.github.com/4a4cfded210d7ce3c2570438a52b5002
[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.
https://gist.github.com/4e9f6d1ed52cd8cbec51a906a4d78132
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.
π Tip
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. π
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:
https://gist.github.com/b9345bd020ae325a048e0ae2e4c6ec84
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
andpackage-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:
https://gist.github.com/29bd319ca2fa19ea4fcfbe3a5515a4e3
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:
https://gist.github.com/48ff74b99597bdaa31483c35434512da
Once you write some code and create 2-3 commits, try to run the following command:
https://gist.github.com/78a495485f5e4168315c40e0100773ff
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:
https://gist.github.com/5706482f05e96800c278fd737d031872
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.
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.