Formatting code consistently can be a challenge, especially when working on a team. The beauty of modern-day web development is that the tooling has gotten so much better! This article will guide you through setting up Prettier to format your code in Visual Studio Code automatically.
For demo purposes, here’s the sample code we will be formatting. If you’re picky about code formatting, you might pick up on some apparent missteps immediately.
To work with Prettier in Visual Studio Code, you’ll need to install the extension. Search for Prettier - Code Formatter. You can see the extension below. If you’re installing it for the first time, you’ll see an “install” button instead of the “uninstall” button you see on mine.
With the Prettier extension installed, we can now leverage it to format our code. We’ll work more on this later, but we can use the Format Document command to start.
To open the command palette, you can use
Command + Shift + P on Mac or
Control + Shift + P on Windows. In the command palette, search format, then choose Format Document.
You may then be prompted to choose which format to use. To do so, click the Configure button.
Then choose Prettier - Code Formatter.
And then VOILA! Your code is nice and formatted. Notice all the fancy improvements!
This can also work on CSS files. From this:
So far, we have had to run a command to format our code manually. Instead, you can choose a setting in VS Code to have your files automatically formatted when you save them. This has some great benefits.
You never have to format your code again manually!
To change this setting, use
Command + , on Mac or
Control + , on Windows to open the settings menu. Then search for Editor: Format on Save and make sure it is checked.
With this setting in place, you can go about your business writing sloppily formatted code like we all do, knowing that it will all be taken care of automatically for you.
Prettier does a lot of things for you by default, but you can also customize the settings. Here are a few of the most common settings.
Open the settings menu as above. Then, search for Prettier. This will bring up all of the settings that you can change right there in your editor.
For example, what if I change the tab width to 10.
Then save my file.
This is probably not the tab width size you want to keep, but it’s all up to you!
The downside to using the built-in settings menu in VS Code is that it doesn’t ensure consistency across developers on your team. If you change settings in your VS Code, someone else could have an entirely different set of settings in theirs.
Establish consistent formatting across your team by creating a configuration file!
To solve this, you can create a Prettier configuration file. It has to be titled .prettierrc.(ext) with one of the following extensions.
I typically prefer JSON configuration files where you can define key -> value pairs for your settings. VS Code will even provide some intellisense for you as you type.
Here’s an example of a simple configuration file.
For more specifics on the configuration files, check out the Prettier Docs. After creating one of these and checking it into your project, you can ensure that every team member follows the same formatting rules.
Prettier is a helpful tool for manually formatting your code. It takes time that can be better spent writing more code. Take advantage of the amazing modern tools out there and set up Prettier.
Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.Sign up
Click below to sign up and get $100 of credit to try our products over 60 days!