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.
Install NodeJS and NPM
First, we need to install both NodeJS and NPM because Prettier is packed as an NPM (Node Package Manager) solution.
After the installation, run node -v and npm -v in the console to verify you have them both ready.
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.
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.
If SFDX commands are not visible in your VSCode, you need to install Salesforce CLI to enable them.
Run NPM Init
Run npm init on the new project root path in the console, and accept all the default options.
This command sets up a new npm package and creates a package.json file for storing npm packages used in this project.
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 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.
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.
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!
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:
- Install NodeJS and NPM
- Install VSCode
- Create a Salesforce project
- Run NPM Init
- Install Prettier Command Tools
- Install Prettier VSCode Plugin
- Configure Format-on-save
- Reopen the project
- 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 have any questions, feel free to leave them in the comments. I will answer them as many as possible.