Upgrade your Code Quality with Linter and Formatter (Part 2)

Hi there! Welcome back, I hope you have already read Part 1 of this. If you haven’t, a quick visit back to the Part 1 will help you have the context for this Part 2.

Prettier!

Thanks to the Prettier team, they did a good job creating this tool to help us remove the pain of code formatting.

After removing the errors (Part 1), your code still looks hard-to-read, and we can’t manually format it line-by-line. You would spend your whole life doing it 😂, I’m just kidding.

Let’s cut to the chase.

Firstly, install the Prettier:

1yarn add --dev prettier

This is the code in index.js

Before formatting

Then run prettier on index.js and see how it works:

1npx prettier index.js

After the formatting

Look, how organized your code is!

Wait, but it just prints out the result in the Terminal, right? How do I get it to update the file directly?

Easy peasy! You just need to add an option “–write” to the command

1npx prettier index.js --write

Run it again and check your file!

You can also apply it to many files. Let’s create a new directory “src”, move index.js to it, and create another one “hello.js” as below:

1const hello=()=>console.log('Hello, Prettier! Thanks for help')

Update your command, change “index.js” to “src” and check the result:

1npx prettier src --write

Your code looks good, right?

We have been using the default config of prettier, but it allows you to make your own config based on your need.

Let’s say, I don’t want “semicolon” at the end of each line.

To achieve that, I need to create a file “.prettierrc”. Prettier will read this config file and apply them.

Content of this file is json, add the below to the file:

1{
2  "semi": false
3}

Execute the prettier command and check your files again!

Press enter or click to view image in full size

It does remove semicolon.

You can find more configuration at here.

In real project, most of people will use config file for convenient

That’s it! Prettier, small tool yet powerful.

We now have ESLint to find and fix errors

We have Prettier to format code

And you have to run separate commands for each.

What if we can combine them? 2 tools works together in 1 command?

Of course, we can! Check it out here.

Thanks for reading! I’ll see you in Part 3.