[Automatic formatting] How to use Prettier in VSCode [Settings required] (Update: February 16, 2022)

 Published: July 30, 2021

• HTML, CSS

 

 

 

Do you ever think like this when using VSCode?

" It's troublesome to adjust spaces and line breaks one by one... "

This article is about solving the above problem.

In conclusion, the solution is to use a tool called " Prettier ".
This article explains how to use Prettier with VSCode.

VSCode is the editor we recommend on this site.
The following article explains how to install VSCode.

[For Beginners] How to use Visual Studio Code [Illustrated]

read article

What is Prettier

"Prettier" is one of the extensions of VSCode . It automatically cleans up your messy
code .

 

With Prettier, the moment you write code and save the file, the code is automatically ready .

Install Prettier

Now start VSCode.
I will install Prettier.

It works like the image above.
First, click the " Extensions " button on the left side of the screen.

Enter prettier in the search field .

I think there is something called " Prettier - Code formatter " in the search results . Click the Install button for
"Prettier - Code formatter" .

Prettier installation is now complete.
But Prettier doesn't work just by installing it .

To use Prettier, you need to configure it.

Configure Prettier to work

There are two items to set.

• Enable Format On Save

• Set Default Formatter to Prettier

Enable Format On Save

Click the gear icon on the bottom left of the screen . Click " Settings
" from the displayed items .

The " Settings tab " will open.

Enter " onsave " in the search field .
Then you will see an item called " Format On Save " in the search results.
Check "Format On Save".

This will automatically " format " when you write code and save the file.
"Format" means "to arrange".

Set Default Formatter to Prettier

One more setting is required.

You have to decide " what to format with ". Here, I want to format using " Prettier
" that I installed earlier .

This time, enter " format " in the search field of the settings .
Then, the item " Default Formatter " will be displayed in the search results.

Select " Prettier - Code formatter " from the pulldown in "Default Formatter" .

Now when you write the code and save the file, it will be automatically formatted using Prettier .

summary

• Install Prettier

• Enable Format On Save

• Set Default Formatter to Prettier

With the above procedure, you can create a state where VSCode automatically formats the code.
That's it for the article.

By the way, for those who are learning programming, it is also recommended to learn with " subscription ".
Nowadays, school is " too many kinds" and "too expensive " ...

Here are some specific recommendations:

Since the service started, it has been quite popular. It seems that the number of monthly registrants is limited
now because it is too popular .

Please register as soon as possible.

[Explanation up to initial settings] Build a WordPress local environment with LocalbyFlyWheel

read article

[What is Responsive] Separate CSS for smartphone display and PC display

read article

[No laps] What should I do next after Progate?

read article

recommended for you