Adding Automatic Code Formatting to React and TypeScript

Enforcing a consistent code style improves the readability of the code base, but it can be a pain even if ESLint reminds us to do it. Wouldn’t it be great if those semicolons we forgot to add to the end of our statements were just automatically added for us? Well, that is what automatic code formatting tools can do for us, and Prettier is one of these great tools.

We will start this section by installing Prettier before configuring it to work nicely with ESLint and Visual Studio Code.

Adding Prettier

We are going to add Prettier to our project by following these steps in Visual Studio Code:

1. Make sure you are in the “frontend” directory. Execute the following command to install Prettier: