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.
Table of Contents
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.
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.
Note that when creating a new project, VSCode automatically initiates 2 configuration files, .prettierrc and .prettierignore, both of which are used by Prettier.
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.
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.
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!
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:
- 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’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.
Hi! thanks for the explanation, I was wondering, is it essential to run NPM init and create the package.json?
I just download the Extension and then set Prettier as Default Formatter from the User Settings, but for some reason it does not work. Bringing up the error: “Prettier cannot format”
I believe it may be related to settings.json file, mines are:
“xml.fileAssociations”: [
],
“[apex]”: {
“editor.defaultFormatter”: “esbenp.prettier-vscode”,
“[apex]”: {
“editor.defaultFormatter”: “esbenp.prettier-vscode”
}
},
“better-comments.tags”: [
Hi Thanks for detailed documentation on this, appreciate your efforts. Its really helpful to us. Please let us know this auto save formatter works for VF page including java script too.
Would like to know do we need to run this command npm install –save-dev –save-exact prettier prettier-plugin-apex in-spite of the Prettier app installed in workspace.
Thanks in Advance
Kind Regards
Naresh
Hey,
Thanks for the post.
There is one error in this command –
npm install –save-dev –save-exact prettier prettier-plugin-apex
it should be
npm install –-save-dev –-save-exact prettier prettier-plugin-apex
“No matching version found for prettier-plugin-apex@^1.10.1” getting this error after running command
npm install –save-dev –save-exact prettier prettier-plugin-apex
Processed exact steps you mentioned . Please help
I also had the same issue, I changed the version to 1.10.0 and it works.