Make Your Code Shine with Prettier Extension for VS Code
Tags: vscode, prettier, formatting, extensions
Published: 2023-02-28 08:14:13

---
title: Make Your Code Shine with Prettier Extension for VS Code
published: true
date: 2023-02-28 07:56:47 UTC
tags: [VSCode, Prettier, Formatting, extensions]
canonical_url: https://raziul.dev/make-your-code-shine-with-prettier-extension-for-vs-code
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wgl5gs3m04jnm9vc257p.png
---

Do you want to improve the consistency and readability of your code without spending hours on it? Look no further than **Prettier Extension for VS Code**.

## What is Prettier? 🤔

[Prettier](https://prettier.io/) is a code formatter that makes your code more readable with just a few clicks. It automatically formats your code to match a set of pre-defined rules, ensuring consistency across your entire codebase.

In this article, we'll explore the benefits of using Prettier for VS Code and show you how to get started.

## Why Use Prettier on VS Code?

Prettier offers several benefits for developers, including:

1. **Automated formatting:** Prettier automatically formats your code, saving you time and effort.

2. **Consistency:** Prettier enforces a consistent coding style across your entire codebase, making it easier to read and maintain.

3. **Configurability:** Prettier offers a variety of configuration options, allowing you to customize the formatting rules to fit your preferences.

4. **Integration with VS Code:** Prettier integrates seamlessly with VS Code, making it easy to use.

## How to Install and Use Prettier for VS Code?

Installing Prettier on VS Code is very easy. You can Install [Prettier Extension from the marketplace](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) or Follow these steps:

1. Open VS Code and navigate to the **Extensions** view by clicking on the Extensions icon in the left sidebar.

2. Search for " **Prettier - Code formatter**" in the Extensions Marketplace.

3. Click the **Install** button next to the extension.

![Installing Prettier extension on VS Code](https://cdn.hashnode.com/res/hashnode/image/upload/v1677570258687/645dada3-c8a6-4b34-82ae-50ba1d7fc9ab.png)

Once Prettier is installed, you can format your code by using the default keyboard shortcut " **Shift + Alt + F**". You can also format your code by right-clicking on the editor and selecting "Format Document".

💡 **TIP:** Configure Prettier as the default formatter and enable "Format on save" from the settings.

## Customizing Prettier Configurations

Prettier offers a variety of configuration options that allow you to customize the formatting rules to fit your preferences.

1. Open the VS Code Settings by selecting "Preferences: Open User Settings" from the Command Palette.

2. Search for "prettier" in the search bar.

3. Select "Edit in settings.json" under "Prettier: Configuration".

4. Add or modify the configuration options in the JSON file.

## Conclusion

**Prettier** is a powerful tool that can save you time and improve the quality of your code. By automating code formatting and enforcing a consistent coding style, Prettier helps make your code more readable and maintainable. Install Prettier today and make your code shine.