Set Up the Prettier Code Formatter for Salesforce Projects

Set Up the Prettier Code Formatter for Salesforce Projects

Currently, Prettier supports Apex, Aura, and Lightning Web Components (LWC) as well as standard file formats like .json, .md, .html, and .js.

Using Prettier for Apex, Aura, and LWC requires some configuration.

  1. If you don’t already have a package.json in your project, run: npm init
    You can accept all the defaults.

  2. Install Prettier by running: npm install --save-dev --save-exact prettier prettier-plugin-apex

  3. Create a Prettier configuration file called .prettierrc, in the root of your project, with the following content.

    NOTE: The "trailingComma": "none" setting is required for Aura.

    {
      "trailingComma": "none",
      "overrides": [
        {
          "files": "**/lwc/**/*.html",
          "options": { "parser": "lwc" }
        },
        {
          "files": "*.{cmp,page,component}",
          "options": { "parser": "html" }
        }
      ]
    }
    
  4. If you’d like to further customize Prettier, add other config options.

  5. Install the Prettier extension for VS Code.

  6. If you want to ensure that all your files are formatted, enable the setting editor.formatOnSave in VS Code. For information about configuring your settings, see User and Workspace Settings in the Visual Studio Code docs.

If you want to format your files each time that you commit changes to your Git repository, set up a Git hook.