Set Prettier as your VS Code formatter

leoncodes00

Cha Yang

Posted on December 19, 2019

Set Prettier as your VS Code formatter

It can get annoying when you're writing code and have to worry about indenting a line and putting semicolons at the end to make your code look cleaner. There's a way around that and it's called a code formatter. A code formatter parses your code and reprints it with its own rules. There are many code formatters out there but the one I'm currently using is called Prettier. It's a code formatter that works for many languages and editors.

Installation:

There are two ways that I know of to install Prettier in VS Code.

First Option -
Open VS Code and type the command Mac(Command + P), Windows(Ctrl + P) and paste the following command, and press enter.

ext install esbenp.prettier-vscode

Alt Text

Second Option -
Open VS Code and on the left side, you should be able to see five options and a settings option at the bottom left. You would want to click on the fifth option and that takes you to the extensions and package place in VS Code. You should then see a search on the top left. Type in Prettier in the search bar. You should see Prettier - Code Formatter as your first option. Click that and install it on the right.

Alt Text

Setting Prettier as your Code Formatter:

After you have Prettier installed, now it's time to set it as your code formatter. There should be a settings tab on the bottom left. Click that choose the settings options. There should be a screen that's popped up to the right. That's the settings page. You would then click on Text Editor on the left. Click that and scroll down until you see an option that says Default Formatter. Click the option right under that and scroll until you see the name, esbenp.prettier-vscode. Select that option.

Alt Text

Now that you've set prettier as your default formatter, you won't notice any changes until you've set prettier to format on save. On the Text Editor area where we found the place to set default formatter. You would want to click Formatting. This takes you the place where you can set prettier to format your code on save. There should be an option under Formatting that says Format On Save. Check that box and that is all.

Alt Text

Now that you've set Prettier as your default formatter and also make it format on save, you can now let Prettier handle the rest. For example,

This is your text editor before saving.

Alt Text

This is the result after saving.

Alt Text

See? Isn't this much better? It even adds a semicolon to the end of a line and all you have to do is save your editor. Now you can go and write code without worrying about formatting your text to look nice. Instead, Prettier will do it for you!

๐Ÿ’– ๐Ÿ’ช ๐Ÿ™… ๐Ÿšฉ
leoncodes00
Cha Yang

Posted on December 19, 2019

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

ยฉ TheLazy.dev

About