Format code with Prettier on VS Code

Tram Ho

Preamble

Format code is always a pain for developers, especially when working in teams, seeing the code of an unformatted person is really painful. It’s great that there are so many tools out there that make this so much simpler these days. If you are working with JS, Prettier is a great extension for you, well if you are using VS Code.

For example code eye pain

Here is the malformed code that we will use in this article, some errors appear including:

  • Use a mix of single and double quotes
  • The const person’s closing brace must be on the same line as it, in this case
  • console.log in the function must be indented
  • You may not like the parentheses around function parameters in this case, for funtion with only 1 parameter, we can omit the parentheses.

Install Prettier

Let’s start to install.

To work with Prettier on VS Code, you will need to install the Prettier extension. Search for Prettier – Code Formatter on VS Code, you can see the extension interface as below. If you install for the first time, you will see an “install” button, just click and the installation will be done quickly

Format Command

After Prettier is installed, we can use it to format code immediately. We’ll configure it in detail later, but to get started, we’ll try using the Format Command.

To open the command panel, you can use Command + Shift + P on a Mac or Ctrl + Shift + P on Windows. In the command panel, find the format and choose Format Document .

You may be asked to choose which formatter to use, in which case click the Configure button.

Then choose Prettier – Code Formatter .

And that’s it! Your code is formatted and easy to read. Let’s take a look at some differences:

  • Adjust space
  • Adjusting bracket {}
  • Adjust quotes to parentheses

Prettier also works with CSS files

From this Code:

Like this:

Automatically format when Save

Above we have run the command manually to format the code. Now, we can use the VS Code setting to automatically format your code every time you save, you won’t need to worry about formatting the code again, VS Code will do it automatically for you.

To change the setting, use Command +, on a Mac or Ctrl +, on Windows to open the settings menu. Then look for Editor: Format on Save and make sure it’s checked.

With Format on Save enabled, you are free to write sloppy code, and VS Code will take care of automatically reformatting it for you.

Config Prettier in VS Code setting

Prettier does a lot of things by default, but you can customize its settings. Some common things can be set such as:

  • Single blink – You can choose between single and double quotes
  • Semicolon – Select whether to add a semicolon at the end of a line.
  • Tab – Config a tab will contain how many spaces

Open the menu settings panel then search for Prettier . All settings will be opened in the editor.

I will save the settings in here for you to explore for yourself.

Create Prettier config file

The downside of using settings in the VS Code settings menu is that it doesn’t guarantee consistency among developers on the team. If you change the setting in your VS Code, other people may also have different settings in their VS Code. This makes it very difficult to unify formats in the team.

To solve this problem, you can create a Prettier config file to share in the project. It must be named .prettierrc. (Ext) where the extension (ext) is one of the following:

  • yml, yaml, or json
  • js
  • toml
  • or the extensions included in package.json (optional)

Here is a simple config file example:

To see more specific configs, you can check it at Prettier Docs . After you have created the generic config file, you can make sure all members follow the same format rule.

summary

You are too tired of editing conventions when coding, or you are simply too lazy to code, Prettier will save you your coding time. Hopefully this article has helped you a bit on your way to becoming a mindful and engaging developer.

Share the news now

Source : Viblo