How to Set Up Prettier – Code Formatter

If you're a beginner in web development, you might have heard about how important it is to write clean and well-structured code. One tool that can help you achieve that is Prettier—an automatic code formatter that keeps your code looking tidy, consistent, and easy to read.
Prettier is an opinionated code formatter that helps ensure your code is clean, consistent, and easy to read. It supports a wide range of languages, including JavaScript, TypeScript, HTML, CSS, JSON, and more. By automatically formatting your code, Prettier helps enforce a consistent coding style, which improves readability and reduces the need for code style discussions during code reviews.

In this article, we'll guide you through setting up Prettier in Visual Studio Code (VS Code), one of the most popular code editors for web development. We'll cover installation, configuration, and how to ensure Prettier works with your development workflow.

---

1. Why Use Prettier?

Before we dive into the setup process, let's quickly review why Prettier is a valuable tool for developers:

• Consistency: Prettier automatically formats code according to a consistent set of rules. This ensures that your team writes code that looks the same, regardless of who wrote it.
• Improved Readability: Well-formatted code is easier to read and understand, reducing cognitive load for developers.
• Reduced Errors: Prettier helps eliminate common formatting errors (e.g., missing semicolons) that can cause bugs.
• Time-Saving: By automating code formatting, developers can spend less time on code style and more time writing actual code.

---

2. Installing Prettier in VS Code

Step 1: Install Prettier Extension

To begin, you'll need to install the Prettier extension in VS Code.

1. Open VS Code.

2. Click on the Extensions icon in the sidebar (or press Ctrl + Shift + X).

3. In the search bar, type Prettier - Code formatter.

4. Click the Install button to install the extension.

Step 2: Verify Installation

Once the extension is installed, you can verify that Prettier is available by pressing Ctrl + Shift + P (or Cmd + Shift + P on macOS) to open the Command Palette. Type Prettier and check that the Prettier: Open Output command is listed.

---

Format on Save

To make sure your code is automatically formatted each time you save a file, enable the Format on Save option.

1. Go to File > Preferences > Settings (or Cmd + , on macOS).

1. In the search bar, type format on save.

1. Check the box next to Editor: Format on Save.

This ensures that Prettier will format your code every time you save a file, eliminating the need to run a separate formatting command manually.

3. Configuring Prettier

Now that Prettier is installed, you can customize it to fit your coding style preferences. Prettier uses sensible defaults, but you may want to configure specific options, such as indentation style or line length.

Step 1: Create a Configuration File

You can create a .prettierrc file in the root of your project to define Prettier's settings. To create the file:

1. In your project directory, create a new file named .prettierrc.
2. Add your preferred settings to the file. For example:

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

Common Prettier Settings:

• semi: Determines whether semicolons are added at the end of statements. (true or false)
• singleQuote: Use single quotes instead of double quotes. (true or false)
• tabWidth: Sets the number of spaces per indentation level. (e.g., 2, 4)
• trailingComma: Adds trailing commas where valid in ES5 (objects, arrays, etc.). ("none", "es5", "all")

Conclusion

Setting up Prettier in VS Code can significantly improve your development workflow by automating code formatting and ensuring consistency across your project. Whether you're working on a personal project or collaborating with a team, Prettier helps reduce the overhead of maintaining code style, allowing you to focus more on writing great code.

By integrating Prettier with other tools like ESLint and Git, you can build a streamlined development process that guarantees clean, well-formatted code in every commit. Happy coding!