How To Configure Prettier Apex VSCode (Video)

Prettier Apex vscode

Prettier is the Salesforce recommended Apex code formatter in VSCode, but how to do the Prettier Apex VSCode setup? After all, Prettier is only a command-line tool, can Visual Studio Code use Prettier to format Apex code, and automatically?

The answer is YES. I did a bit of research, figured out the solution, and wrote down this detailed guidance.

If you prefer a video medium, I also created a 7-minute YouTube video with the same content.

Prerequisites

Install NodeJS and NPM

First, we need to install both NodeJS and NPM because Prettier is packed as an NPM (Node Package Manager) solution.

You can follow this official page to install them or alternatively use your favorite package management tool such as Homebrew on mac to do it.

After the installation, run node -v and npm -v in the console to verify you have them both ready.

node installation
node & npm installation

Install Visual Studio Code

Visit Visual Studio Code (or VSCode for short) official website, download and install it.

Verify that you can launch VSCode successfully.

VSCode launched
VSCode launched

Install Salesforce Extension Pack

In order to use VSCode for Salesforce development, you need to install the official Salesforce extension pack.

Important – make sure you fulfilled all requests mentioned in the Prerequisites section of the extension pack page.


Steps to Configure Prettier Apex VSCode

Once we have completed the preceding prerequisites, move on to the following steps.

Create a Local Salesforce Project

Create a new Salesforce project via VSCode by Open (Ctrl+Shift+P) -> SFDX: Create Project with Manifest.

create a salesforce project
create a salesforce project

If SFDX commands are not visible in your VSCode, you need to install Salesforce CLI to enable them.

Note that when creating a new project, VSCode automatically initiates 2 configuration files, .prettierrc and .prettierignore, both of which are used by Prettier.

.prettier config file
.prettier config file

Run NPM Init

Run npm init on the new project root path in the console, and accept all the default options. 

npm init
npm init

This command sets up a new npm package and creates a package.json file for storing npm packages used in this project.

package.json file
package.json file

Install Prettier Apex Code Formatter Command Tool

Run npm install –save-dev –save-exact prettier prettier-plugin-apex in the console to install both the Prettier Apex Code Formatter command-line tool and the prettier-for-apex command-line tool.

Install prettier
Install the Prettier command tool

Install Prettier Apex VSCode Plugin

After the Prettier Apex Code Formatter installation, we need to allow VSCode to invoke them by installing the Prettier VSCode Plugin.

You can install this plugin inside VSCode.

In VSCode, Quick Open (Ctrl+P), paste the following command, and press enter.

ext install esbenp.prettier-vscode

Alternatively, you can also click the “Install” button on the plugin page to install it.

install the prettier plugin
Install the prettier plugin

Configure Format-on-save

Moreover, we also want Prettier to auto-format Apex code when saving the Apex files.

In VSCode, go to the menu command File > Preferences > Settings (Code > Preferences > Settings on Mac).

Search format on save and set the Timeout value to 2000 or more.

It is important to set a bigger number on this value.

If the time consumption of the format-on-save hook exceeds the value, for example, 2000 milliseconds, all actions, including Prettier autoformatting, yield silent errors. Consequently, they fail to function.

format-on-save
Format-on-save timeout value

Reopen the Project

This is the last step before Prettier autoformat works. Close and re-open the project in VSCode.

Important – you do need to execute this step otherwise Prettier autoformat feature doesn’t work.

Test Apex Code Formatting

As a final step let’s create a new Apex file with a distorted format.

Then hit save to trigger the autoformatting functionality of Apex Code Formatter Prettier!

before formatting
Before formatting
after formatting
After formatting

Conclusion

In this post, we have successfully configured Prettier Apex VSCode and achieved autoformatting when saving the Apex files.

Let’s quickly recap all the steps:

  1. Install NodeJS and NPM
  2. Install VSCode
  3. Create a Salesforce project
  4. Run NPM Init
  5. Install Prettier Command Tools
  6. Install Prettier VSCode Plugin
  7. Configure Format-on-save
  8. Reopen the project
  9. Test how it works

As you can see, these steps of Apex code formatter involve a substantial amount of manual work and need to repeat in each and every single Salesforce project. Consequently, it’s a remarkable setback for developers’ adaptation.

In the future, Salesforce VSCode plugin team would likely improve the process so that Prettier installation and configuration become part of the Salesforce project auto-initiation step.

If you’d like to listen to how trailblazers use tools like Prettier to control code quality, you might want to listen to this podcast episode that Jim Bartek and I conversed.

If you have any questions, feel free to leave them in the comments. I will answer them as many as possible.

No Responses

Leave a Reply