Prettier VS Code Setup: A Complete Guide to Code Formatting and Automation

Introduction

Having trouble keeping your code clean and easy to read in VS Code? The fix might be simpler than you think. A “Prettier VS Code Setup” can automate your code formatting and eliminate style debates, giving you a consistent codebase with minimal effort. By adding Prettier to your workflow, you can set rules that apply to all your projects, making sure your experience stays clean and error-free. Whether you’re working alone or with a team, Prettier lets you customize settings that make code formatting more efficient and stress-free. Ready to make your code cleaner and more productive? Let’s jump in!

What is Prettier?

Prettier is a tool that automatically formats your code to make sure it sticks to a consistent style. It saves developers time by removing the need for manual formatting and arguments about style preferences. It easily integrates with Visual Studio Code, where it formats your code every time you save, keeping everything neat without extra work.

Key Takeaways:

• Prettier Automates Code Formatting: Prettier makes sure your code follows a consistent style by automatically formatting it based on preset rules, cutting down on manual formatting and team disagreements.
• Installing Prettier Extension in VS Code Is Quick and Easy: You can install the Prettier extension straight from the VS Code Extensions Marketplace to enable one-click or on-save formatting.
• Prettier Can Run Manually or Automatically on Save: You can use the Format Document command or enable Format On Save to make sure your code is always neatly formatted with minimal effort.
• You Can Customize Prettier to Fit Your Style: Settings like quote style, semicolon usage, tab width, and more can be adjusted in the VS Code UI or through a .prettierrc configuration file.
• Team Projects Get Consistent Formatting with Shared Configuration: Using .prettierc, .prettierignore, and workspace-level .vscode/settings.json files ensures that everyone in a shared project keeps the same format.
• Prettier Can Work with ESLint: In JavaScript and TypeScript projects, you can combine Prettier with ESLint using specific plugins, so it handles both linting and formatting without stepping on each other’s toes.
• Install Prettier Locally to Avoid Version Issues: Adding Prettier as a devDependency in your project ensures that everyone is using the same version, which is key for consistent results across teams and in CI/CD pipelines.
• There Are Troubleshooting Steps for Common Problems: The article offers solutions for common issues with Prettier in VS Code, like format-on-save problems, extension conflicts, and unsupported file types.

Prerequisites

Before you can start formatting with Prettier in Visual Studio Code, you’ll need a few tools set up:

• Visual Studio Code installed: Download it from the official VS Code site.
• Prettier extension for VS Code: You’ll install this from the Extensions Marketplace later on.
• Node.js and npm (optional but recommended): These are needed if you want to install Prettier as a local or global package via the command line.
• Sample code to format: This could be JavaScript, TypeScript, Python, HTML, or Markdown. Prettier works with many popular languages.

For this guide, we’ll be using this sample JavaScript code:

 const name = "James";   
const person = {first: name}   
console.log(person); 
const sayHelloLinting = (fName) => {           
    console.log(`Hello linting, ${fName}`) 
}   
sayHelloLinting('James'); 

If you’re familiar with code formatting, you might notice a few issues:

• Mixing single and double quotes.
• The first property of the person object should be on a separate line.
• The console statement inside the function should be indented.
• Optional parentheses around the arrow function’s parameter.

These steps apply whether you’re on Windows, Linux, or macOS.

How To Install Prettier in Visual Studio Code

To format your code with Prettier in Visual Studio Code, you first need to install the Prettier extension. There are two ways to do it:

Step 1: Install the Prettier Extension in VS Code

• Open Visual Studio Code.
• Go to the Extensions view by clicking the square icon in the sidebar or pressing Ctrl+Shift+X (or Cmd+Shift+X on Mac).
• In the search bar, type Prettier – Code formatter. Click on the Prettier – Code formatter extension and click Install.

Step 2: (Optional) Install Prettier via npm

If you want more control or plan to use Prettier from the command line or in CI/CD:

• Install locally: npm install --save-dev prettier
• Or install globally: npm install --global prettier

This is useful if you want to use a specific version of Prettier for your project, which is common in team settings and for CI/CD.

How To Use Prettier in Visual Studio Code

Once you have the Prettier extension in VS Code, you can start formatting your code directly inside the editor.

Using the Format Document Command

To begin, let’s look at how to use the Format Document command. This command ensures your code has proper spacing, line breaks, and quote consistency, which is one of the main benefits of using Prettier. To open the command palette, press Command + Shift + P on macOS or Ctrl + Shift + P on Windows. In the command palette, search for “format” and choose Format Document. You might be asked to choose a formatter. Click Configure and then select Prettier – Code Formatter.

Note: If you don’t see the prompt to select a default formatter, you can manually set Prettier as the default formatter in your settings by going to Editor: Default Formatter and setting it to esbenp.prettier-vscode.

Formatting Code on Save

At this point, you’ve been running the command to format manually. But you can automate this by enabling Format on Save. This makes sure that every file is formatted automatically when saved, before it’s committed to version control. To enable this, press Command + , on macOS or Ctrl + , on Windows to open the Settings menu. Once the menu is open, search for Editor: Format On Save and make sure the option is checked. After this, your code will be formatted automatically every time you save.

Changing Prettier Configuration Settings

Prettier comes with default settings, but you can customize how it works to fit your coding style. Open the Settings menu and search for Prettier to see and adjust options like:

• Single Quote: Choose between single and double quotes.
• Semi: Choose whether to include semicolons at the end of lines.
• Tab Width: Decide how many spaces should represent a tab.

Creating a Prettier Configuration File

Everyone has their own preferences for code formatting. But in a team project, it’s crucial that everyone uses the same settings to ensure consistency. You can do this by creating a Prettier configuration file. Create a new file named .prettierrc. in your project, using formats like:

• YAML
• JSON
• JavaScript
• TOML

Here’s an example of a .prettierrc file in JSON format:

 
{    
    "trailingComma": "es5",    
    "tabWidth": 4,    
    "semi": false,    
    "singleQuote": true 
} 

Once you’ve created this file, commit it to version control, and everyone in the team will use the same formatting settings.

Configure Prettier for Team Projects

When working with a team, it’s important that everyone formats the code the same way. Relying on individual editor settings can cause inconsistencies, messy diffs, and frustration during code reviews. To avoid this, you should configure Prettier in a way that everyone can use the same settings.

Add a .prettierrc Configuration File

Include a .prettierrc file in your project’s root with your team’s formatting rules:

 
{     
    "singleQuote": true,     
    "semi": false,     
    "tabWidth": 2,     
    "trailingComma": "es5" 
} 

Create a .prettierignore File

Like .gitignore, this file tells Prettier which files or folders to skip. Commit it to version control so everyone has the same settings:

• node_modules/
• build/
• dist/
• *.min.js

Use Workspace Settings in .vscode/settings.json

Inside your project’s .vscode folder, create a settings.json file with this content:

 
{     
    "editor.defaultFormatter": "esbenp.prettier-vscode",     
    "editor.formatOnSave": true 
} 

This makes sure Prettier is enabled for everyone who clones the project, without requiring extra setup.

Install Prettier Locally

To prevent version mismatches, install Prettier as a dev dependency:

npm install --save-dev prettier

This ensures that all team members and CI systems use the same version of Prettier.

Using Prettier with ESLint

If you’re working with JavaScript or TypeScript, you probably use ESLint, which checks your code for issues. While ESLint focuses on code quality, Prettier handles formatting. When used together, they work great—but it’s important to set them up right to avoid conflicts. Here’s how to combine Prettier and ESLint in VS Code.

Why Use Prettier and ESLint Together?

• Prettier: Handles formatting (spaces, line breaks, indentation, etc.)
• ESLint: Handles code quality (syntax errors, best practices, anti-patterns)

Without proper setup, Prettier and ESLint can conflict. For example, ESLint might enforce one rule, but Prettier might change it. To avoid this, use ESLint plugins that turn off conflicting rules and leave formatting to Prettier.

Step 1: Install the required packages:

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

Step 2: Update your ESLint configuration:

 
{     
    "extends": [         
        "eslint:recommended",         
        "plugin:prettier/recommended"     
    ] 
} 

Step 3: Set up VS Code to use both ESLint and Prettier together:

 
{     
    "editor.formatOnSave": true,     
    "editor.defaultFormatter": "esbenp.prettier-vscode",     
    "editor.codeActionsOnSave": {         
        "source.fixAll.eslint": true     
    } 
} 

Optional: Add a lint script to package.json:

 
"scripts": {     
    "lint": "eslint .",     
    "format": "prettier --write ." 
} 

Prettier vs. VS Code’s Default Formatter

While both Prettier and VS Code’s default formatter aim to keep your code neat, Prettier is generally preferred because it’s more consistent and easy to automate. Here’s why:

• Prettier: Always applies a consistent style across all files.
• VS Code’s Formatter: Limited to specific languages and depends on individual settings.

Troubleshooting Prettier in Visual Studio Code

If Prettier isn’t formatting your code as expected, check for issues like conflicting extensions or incorrect settings.

Conclusion

In this guide, we’ve shown you how to set up Prettier in Visual Studio Code to automate formatting and reduce manual effort. By using Prettier with your team and in your CI/CD pipeline, you ensure everyone uses the same style, making your codebase clean, readable, and consistent.