Building high-quality apps these days is hard.

That’s why nowadays, there are many tools that allow us to write quality code and make sure our apps don’t break. You may think of testing tools like Jest at first, but before even writing a test, you can prevent many head-scratching situations.

In this article, we will overview the process, how I set up these tools for a React project. First of all, you need to install Prettier.

For using this tool you need to install Prettier:

npm install -D prettier

Now you have Prettier installed and from now with a little config, your code will be always consistent. I’m sure many of you were work on projects where some files have tabs, some spaces, or have a trailing comma and others don’t…

Prettier is a project which takes all the conversation out of context and it standardizes to a predefined style. So everyone will be on the same format.

I actually, really don’t care about how is my code looks like as long as it’s well-formatted and consistent. The great thing Prettier does this for us.

Configurate Prettier

You can run from the command line as an npm script:

"scripts": {

    "format": "prettier "src/**/*.{js,html}" --write",clicks'))

}

Or install the plugin and just add to your vscode config this two lines (without my comments):

“editor.formatOnSave”: true, // enable a formatter to format on save

“prettier.requireConfig”: true,    // prettier only run if installed

And create a file in the project root directory named .prettierrc with an empty object {} in it (it means you will use the default settings).

And that’s it Prettier is installed in your project. And now if you press ctr s Prettier will run so you can focus more on your code.