Prettier Code Formatter

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 authored by Dang Mai.

Prerequisites

This plugin requires NodeJS and npm in your environment. For setup details, refer to 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. If you’d like to know more about formatting options of Prettier, read other config options.

{
    "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 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. 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.

Prettier Apex plugin runs slower than most other formatters. Because saving is a critical operation, you can decide if you want to wait till the plugin completes formatting before saving the file. Read how VS code handles slow save operations.

Feedback or Bugs | Edit this Article