Code Style Matters: Styling Angular apps using Prettier and TSLint (2020)

Share on facebook
Share on google
Share on twitter
Share on linkedin

Some people think that well-styled code is a waste of effort and as long as the code works you shouldn’t bother. It’s often the same kind of people how says that writing automatic tests are a waste of time because it is faster to only test manually right now but doesn’t take the future maintenance of the code into consideration.

The thing is that code is read way more than it is written. Read that again. If you think logically about this it should be obvious why it pays off to keep the code readable by good and consistent style practices.

Ensuring that code is nice and consistent style is crucial for a team and a clear style guide should be established as early as possible in the project’s lifetime. Agreeing on the specific style (tabs vs spaces, quotes vs semi-quotes etc…) is not as important as sticking to a consistent code style. A code base will naturally keep developing in the style that it has previously been developed in. Uncle Bob writes about the Broken window metaphor in Clean Code, which means that the same way an abandoned house is getting totally trashed with thievery and graffiti when just one window is broken, will a code base. If no active action is taken, the team will naturally slack in code style, if the code base already is trashy. With that said, how do we keep the code clean?

Billedresultat for broken window code complete

Automatic code style tools to the rescue

I’m all about automatization and optimization with all my work. I can even be so harsh as saying; if it can’t be automated, don’t even bother. What is the easiest way to ensure that a team develops software with a readable and consistent code style? By making it impossible to do the wrong thing, or at least make the right thing the path of least resistance. With Angular development, we are in this post gonna talk about two helpful tools for just that: TSLint and Prettier. TS Lint is a linting tool whereas Prettier is a formater. The two tools have some overlap but they serve a different purpose.


Angular CLI projects ships with TSLint which is a linter for typescript code. The Angular framework even ships with a special typescript rule set called Codelyzer, which ensures that Angular apps follow the Angular style conventions.


Prettier is an opinionated code formater, that will format your code. Because this is an opinionated framework, you need to accept the way it formats the code. But even if you didn’t like the formatting style of Prettier, my opinion is that the benefit of having automated code styling outweighs any dislike of the specific style conventions.

Using Prettier with TSLint

So TSLint will ensure that the app follows a ruleset or otherwise the lint script will fail and Prettier will format your code automatically. TSLint also has a –fix option, which can give some overlap with Prettier on eg. double quotes vs single quotes. The way to deal with this is ensuring that the TSLint configuration and Prettier configuration don’t have any overlap. If any overlap occurs regarding formatting, Prettier should be the one who gets to enforce a rule.

Setting up and configuring TSLint

For setting up TSLint, we are simply creating a new Angular CLI app using: ng new StyledApp. From here you would configure TSLint to not contain rules that are overlapping with Prettier. This includes automatic semicolons, line width quote style and bracket spacing as these are handled by Prettier. The TSconfig ends up looking like this:

Setting up and configuring Prettier

Setting up Prettier is easily done with VS Code marketplace by searching for “Prettier” and installing that. This will hook Prettier into VS Code code formatting  (alt + shift + f on windows). But first, we need to configure Prettier. Prettier can be configured with Editorconfig, .prettierrc or a “prettier” property in package.json. I prefer to do the prettier property in package.json and setup Prettier like this:

This is just my preferences of how to style code. You can style how you like in your apps.

Where to go from here

Having Prettier setup with TSLint gives you a strong foundation for your Typescript apps as you no longer need to maintain code style manually, thus making the code more readable and consistent. VS Code has other nice styling tools such as auto fix TSLint and format on save and organize import alphabetically.

Do you want to become an Angular architect? Check out Angular Architect Accelerator.

Related Posts and Comments

How to Set up a CI pipeline with Azure Pipelines and Nx

It goes without saying that having a CI pipeline for your Angular apps is a must. Setting one up for regular Angular apps is fairly straightforward but when you have an Nx monorepo there are certain other challenges that you have to overcome to successfully orchestrate a “build once, deploy many” pipeline. This post will

Read More »

How to Set Up Git Hooks in an Nx Repo

Git hooks can be used to automate tasks in your development workflow. The earlier a bug is discovered, the cheaper it is to fix (and the less impact it has). Therefore it can be helpful to run tasks such as linting, formatting, and tests when you are e.g. committing and pushing your code, so any

Read More »

The Stages of an Angular Architecture with Nx

Long gone are the times when the frontend was just a dumb static website. Frontend apps have gotten increasingly complex since the rise of single-page application frameworks like Angular. It comes with the price of increased complexity and the ever-changing frontend landscape requires you to have an architecture that allows you to scale and adapt

Read More »

The Best Way to Use Signals in Angular Apps

Since Angular 16, Angular now has experimental support for signals and there is a lot of confusion in the community about whether this is going to replace RxJS or how it should be used in an app in combination with RxJS. This blog post sheds some light on what I think is the best way

Read More »

High ROI Testing with Cypress Component Testing

Testing is one of the most struggled topics in Angular development and many developers are either giving up testing altogether or applying inefficient testing practices consuming all their precious time while giving few results in return. This blog post will change all this as we will cover how I overcame these struggles the hard way

Read More »