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:
- Make sure you are in the
frontend
directory. Execute the following command to install Prettier:> npm install prettier --save-dev
- Now, we want Prettier to take responsibility for the style rules from ESLint. Let's install some...