ホンダフリードの運転手左足前がフラットになったら4台欲しい。村野小春さんと大きな新居で赤ちゃんも作り結婚祝いも欲しい。L-570の100周年版とD2RとDST-Lacertaと特注スピーカーも欲しい。: [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: