It’s not always easy to maintain clean and readable Apex, JavaScript, and Lightning Web Component code, especially when working with a team of developers who might modify the same files.

That’s where code formatting tools come in. Through integration with your code editor of choice, these tools fit seamlessly into your development process to ensure clean and well-formatted code. Setting up a code formatter is a recurring task at the start of any project, so I created this quick guide as a handy reference.

For this article, we’ll focus on installing and configuring Prettier, a self-described “opinionated code formatter”. Here are some assumptions for this walkthrough:

1. We’re working on a Mac, though the process is nearly identical on Windows.
2. We’re using VSCode for our IDE.
3. Node and NPM are already installed.
4. We have an existing VSCode Salesforce project with Manifest (not SFDX) .

Steps to Install and Configure Prettier Code Formatter in VSCode on a Mac

Step 1: Install the Prettier Extension

Open your VSCode project and either click on the Extensions icon in the left sidebar or use the shortcut Cmd + Shift + x to open the Extensions palette. Then, search for “prettier” and install the extension created by Esben Petersen.

Step 2: Set Prettier as the Default Formatter

1. Open the VSCode Command Palette by pressing Cmd + Shift + p.
2. Type Settings and select Preferences: Open User Settings (JSON).
3. Add the Prettier configuration details to this file.

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

This is fairly self-explanatory: it tells VSCode to use Prettier as the default formatter and also specifies that Prettier should run when the file is saved.

Install the Prettier Node Module Locally in Your Project

npm install prettier --save-dev

This command adds Prettier to your project’s package.json file and node_modules folder.

Now, Prettier should automatically format your JavaScript, HTML, and Apex code on save. Or if you want to format a file without saving it, you can highlight a section of code or the entire file, then right-click and choose “Format”.

Testing Out the Code Formatter

Open an HTML file belonging to a Lightning Web Component (note: this can be any HTML file, it doesn’t have to belong to an LWC). Enter some ugly, unformatted code in the file.

<template>
  <lightning-card 
                title="HelloWorld" icon-name="custom:custom14">
    <div       class="slds-m-around_medium">
      <p>Hello, {greeting}!</p>
      <lightning-input
                                label="Name"
        value={greeting}
        onchange={changeHandler}
      >
      
      
      </lightning-input>
            </div>
                <div>
        <div>test</div>
                                </div>
  </lightning-card>
</template>

Hit Cmd + S to save this file and watch the formatting magic that ensues.

<template>
  <lightning-card title="HelloWorld" icon-name="custom:custom14">
    <div class="slds-m-around_medium">
      <p>Hello, {greeting}!</p>
      <lightning-input
        label="Name"
        value={greeting}
        onchange={changeHandler}
      ></lightning-input>
    </div>
    <div>
      <div>test</div>
    </div>
  </lightning-card>
</template>

As mentioned before, you can also format Apex and JavaScript files using this same process.

There you have it: a simple way to incorporate code formatting into your development process.