How to use Prettier in VS Code?

Using Prettier in Visual Studio Code (VS Code) to format code is a popular and effective method that ensures consistent code style. I will now provide a detailed guide on installing and configuring Prettier in VS Code.

Step 1: Install the Prettier Plugin

1. Open VS Code.
2. Navigate to the Extensions view by clicking the square icon on the sidebar or using the shortcut Ctrl+Shift+X.
3. Search for "Prettier - Code formatter" in the Extensions Marketplace.
4. Find the official Prettier extension and click Install.

Step 2: Configure Prettier

After installation, configure Prettier through VS Code settings using one of the following methods:

Method A: Using the Settings UI

1. Open Settings using the shortcut Ctrl+, or by clicking the gear icon in the bottom-left corner and selecting "Settings".
2. In the search bar, type "Prettier" to locate relevant configuration options.
3. Set Prettier as the default formatter and enable the "Prettier: Require Config" setting, which ensures Prettier only runs when a configuration file exists in the project.

Method B: Directly Modify settings.json

1. Open the Command Palette (Ctrl+Shift+P), search for "Open Settings (JSON)", and select it.
2. In the settings.json file, add or modify the following settings:

json
{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "[javascript]": {
        "editor.formatOnSave": true
    },
    "prettier.requireConfig": true
}

These settings set Prettier as the default formatter and automatically format JavaScript files on save (you can add other languages as needed).

Step 3: Create and Use a Prettier Configuration File

To enforce specific formatting rules, create a .prettierrc file in the project root directory. This file defines rules such as indentation size, quote type (single or double), and other preferences:

json
{
    "semi": false,
    "singleQuote": true,
    "tabWidth": 2
}

Step 4: Use Prettier to Format Code

After installation and configuration, format code using either:

• Auto-format on save: If "Format On Save" is enabled, Prettier automatically formats the file when saved.
• Manual formatting: Open the Command Palette (Ctrl+Shift+P), search for "Format Document", or use the shortcut Alt+Shift+F.

By following these steps, you can effectively leverage Prettier in VS Code to maintain consistent code style. This not only enhances code readability but also improves collaboration in team projects.