How To Use Prettier in VS Code

Prettier is a brilliant tool that makes your code more consistent and readable. It does this by automatically adding a style guide to your project. It also integrates with your editor to clean up your work as you save it. Having a default formatting tool in your code editor comes in handy as it ensures you don’t waste time formatting your work. This gives you more time to focus on the essential aspects of the project and avoid getting bogged down by endless lines of code. Prettier will also help prevent bugs in your code by making it easier to identify where the blocks begin and end.

If you have been thinking about using Prettier in Visual Studio Code (VS Code), you’ve come to the right place. Here, we’ll walk you through everything you need to know about the default formatting tool.

Installing Prettier in VS Code

In order to use Prettier in VS Code, you’ll need to install the extension using the method outlined below. The formatting tool is available in the VS Code marketplace, and once integrated, it will automatically streamline your projects. It will format code written in JavaScript, React, Typescript, Vue, and other languages. Let’s get started:

1. Open VS Code and press the Extensions icon.
   
2. Input “Prettier” in the search bar and hit the magnifying glass icon.
   
3. Select the official Prettier extension from the list.
   
4. Hit the “Install” button.
   
5. Once Prettier is installed, press the Reload button to complete the process.
   

The Prettier extension is now installed on VS Code.

Format a Document

With Prettier installed on the platform, you can now use it to format your code. You can do this manually for every document or set it up so that the code is formatted when you save it. Let’s explore these two methods.

Manually Format Document on VS Code Using Prettier

1. Open the command center by pressing Command + Shift + P” if you use a Mac. For those on Windows, click “Control + Shift + P.”
   
2. Search “Format” in the search bar, then pick “Format Document.”
   
3. Select your preferred format from the available options and click on “Configure.”
   
4. Click on “Prettier – Code Formatter” to format the code.
   

Your document will have the appropriate line wrappings, single quotes and spacing. This process will also work on your CSS files.

Automatically Format Document on VS Code Using Prettier

1. Open the VS Code Settings menu by tapping “Command + ,(comma)” if you use a Mac. Click on “Control + ,(comma)”, if you are a Windows user.
   
2. Go to the search bar and input “Editor: Format on Save.”
   
3. Ensure it has a checkmark.
   

Prettier is now automatically configured and will format your code when you hit “Save.” It will ensure that only single quotes are used. The line length will also be adjusted to a set number of characters. These changes will be applied to all your projects, which might not be ideal if you are working with a team. In this instance, you can install Prettier’s formatting toggle, which will allow you to turn the tool on and off as required.

How to Configure Prettier in VS Code

There are several formatting choices that Prettier does by default. However, you can also configure the settings to your liking. For example, you can decide between single and double quotes. You may also choose whether or not to include semi-colons. Here’s how to configure the Prettier settings on VS Code.

1. Go to Settings by clicking “Command + ,(comma)” if you are using a Mac or “Control + ,(comma)” for Windows.
   
2. Search for “Prettier” to see a list of the settings displayed.
   
3. You can change them in the editor and then hit “Save” when you are done.

Your Prettier settings have now been configured to your liking.

Format Document in VS Code Using Prettier Command Line

The Prettier Command Line Interface (CLI) allows you to format your entire project in one go. Using the command line below, you can install it from the VS Code marketplace.

npm install prettier --global

Next, update the current code using the command shown here.

prettier “*/.ts” --write

That’s it. Your project has now been formatted using Prettier’s CLI. It’s essential to bear in mind that as convenient as it is to use, CLI can make it harder to utilize some files. For example, git blame files that Prettier might have already modified may be challenging to access.

Prettier at the Click of a Button

With Prettier, you can easily create a simple and effective way to format your code manually. You can also choose to automatically streamline your work when you save it. This time saving tool is straighforward to set up in VS code and allows you to focus more on the essentials.

Have you used Prettier in VS Code? What has your experience been? Let us know in the comments below.