Why guardrails are important
The very beginning of an Angular project is the most critical time when to implement best practices. It is the one time where nobody is encumbered by deadlines, merge conflicts, or concerns about major refactoring causing bugs and performance issues. This beginning phase is where I like to set the project up for success by enforcing best practices using automation.
One of the essential pieces I aim to achieve in my projects is consistent code quality. To achieve that goal, I primarily focus on appropriate linting of the code, automatic formatting of the code, and making sure that all of these code quality checks are automated. The automation puts in place guardrails so that developers only commit high-quality code to a team repository without needing to overthink as they type away. Most of the initial quality automation is done on the developer’s machine in the code editor and via Git hooks. Let’s see what tools and libraries we use to achieve consistent code quality.
The libraries and tools
Before starting anything, make sure all of your developers are using a robust code editor. I highly recommend Visual Studio Code as it is both lightweight and powerful. Create a set of JSON files to share Chrome Debug settings and commit them to your repository.
For linting, I always focus on making sure that developers get the automatic hints provided to them by the linting tools, as well as confirmation that other files in the project pass the linting rules. I leverage TSLint and StyleLint for code linting. Each of these linters has VSCode extensions to automatically help while coding, see TSLint here and StyleLint here. You can also lint the Git commit message. For that, I recommend using Commitlint. Linting commit messages work best when paired with Git hooks.
For code formatting, I leverage Prettier. It is an excellent code formatter that does well in automation scenarios. When used in project scripts, it can automatically format all your project code while you develop. I recommend the VSCode extension.
For automation, I leverage Git hooks. To help with configuring and running local scripts, I would much recommend installing Husky in your Angular project. Husky makes it easy to manage hook scripts from within your package.json file. Use it in conjunction with lint-staged, which helps to run the linters (StyleLint, TSLint, and Prettier), and you will speed through your staged commits.
Conclusion
As a Director or Architect, our project must maintain consistent code quality regardless of the developers that join and leave the teams. By putting guardrails in place in the beginning, we are ensuring that all developers are following consistent standards for code quality. Have it as an onboarding step to communicate the linting and formatting rules enforced via automation when new developers join the project. It will go a long way in helping that new team member understand why consistency is essential.
Now, some developers may think that the rules are too constricting and decide to bypass the automated linting. To cover that potential issue, you will need to also incorporate code quality checks in the CI/CD process. I’ll write about that in another article.
