---
schema_version: "1"
id: d3f09601a0095f5ad92f2ad76e3dc48edd2a5203b7823a407f1a5fd3038c04a2
title: Prettier Code Formatter for Apex, Aura, and LWC
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/salesforcedx/sfvscode/guides/extension-pack-features/prettier.md
canonical_url: https://developer.salesforce.com/docs/platform/sfvscode-extensions/guide/prettier.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 56cea39ac82ead57efb0898f3e40d3ff664f0b3d178df07214dcd4be182cb13f
products:
  - Salesforce Extensions for Visual Studio Code
  - salesforcedx
---
# Prettier Code Formatter for Apex, Aura, and LWC

Prettier code formatter supports Aura and Lightning Web Components (LWC) as well as standard file formats such as JSON, Markdown, HTML, and JavaScript. Prettier can also support Apex if you install [Prettier Apex plugin](https://github.com/dangmai/prettier-plugin-apex) authored by [Dang Mai](https://github.com/dangmai).

## Prerequisites

This plugin requires NodeJS and npm in your environment. For setup details, refer to [`Downloading and installing Node.js and npm`](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).

## Installation

To install the Prettier Apex plugin:

1. Navigate to the top-level of your project

2. Check if your project contains the `package.json` file. If not, run: `npm init` and accept all the default options.

3. Run:

   `npm install --save-dev --save-exact prettier prettier-plugin-apex`

You must create a configuration file `.prettierrc` in the root of your project. To learn more about formatting options of Prettier, read [other config options](https://prettier.io/docs/en/options.html).

```json
{
  "plugins": ["prettier-plugin-apex"],
  "trailingComma": "none",
  "overrides": [
    {
      "files": "**/lwc/**/*.html",
      "options": { "parser": "lwc" }
    },
    {
      "files": "*.{cmp,page,component}",
      "options": { "parser": "html" }
    }
  ]
}
```

**note:** The `"trailingComma": "none"` setting is required for Aura.

After creating the local configuration file, install the [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) extension for VS Code. If you want to ensure that all your files are formatted whenever you save them, enable the `editor.formatOnSave` setting in your [User and Workspace Settings](https://code.visualstudio.com/docs/getstarted/settings). You can use Prettier with a pre-commit tool to reformat your files before you commit the files. For more information, see [set up a Git hook](https://prettier.io/docs/en/precommit.html).

Prettier Apex plugin runs slower than most other formatters. Because saving is a critical operation, you can decide if you want to wait until the plugin completes formatting before saving the file. Read how VS Code [handles slow save operations](https://code.visualstudio.com/updates/v1_42#_handling-slow-save-operations).