How To Setup Prettier Apex VSCode

Hello friends, today we are going to discuss How To Setup Prettier Apex VSCode. In VSCode, Prettier is the Salesforce recommended Apex code formatter, but how do I set it up? After all, Prettier is only a command-line tool, how can I set it up?

Key Highlights :

1. Use for format or auto indentation of apex code.
2. Also use for LWC, Aura component.

Also, check this: Get Selected Rows In Lightning Datatable In LWC

In short, YES. I did some research, found the solution, and wrote this detailed guide.

Process :

Step 1: In this step, we will install NodeJS and NPM.

It is necessary to install both NodeJS and NPM because Prettier comes as an NPM (Node Package Manager) solution. Follow this link to install them, or use your favorite package management tool such as Homebrew on the Mac to install them.

You should run node -v, and npm -v after installation to verify they are both installed.

Step 2: Here we will install the VSCode. you can skip this step if you already installed it.

Step 3: In this step, we will install Salesforce Extension Pack. Installing the official Salesforce extension pack is required for Salesforce development with VSCode.

Step 4: Here will create a Local Salesforce Project.

Open (Ctrl+Shift+P) > SFDX: Create Project with Manifest

Note: To enable SFDX commands in VSCode, you need to install Salesforce CLI.

Step 5: In this step, we will install Prettier Apex VSCode Plugin. you can also install it by this link.

Step 6: Using the console, run npm init on the new project root path, accepting 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.

npm init

Step 7: Here we will Install Prettier Apex Code Formatter Command Tool. it is used for auto-indentation for the Apex class.

Run npm install –save-dev –save-exact prettier prettier-plugin-apex in the terminal to install both the Prettier Apex Code Formatter command-line tool and the prettier-for-apex command-line tool. If you get any errors check this link.

npm install –save-dev –save-exact prettier prettier-plugin-apex

npm install prettier-plugin-apex

Step 8: For auto format on save In VSCode, go to the menu command

File > Preferences > Settings (Code > Preferences > Settings on Mac).

Search format on save and set it to true.

Step 9: Reopen the VScode and test now.

Output :

Reference :

1. Salesforce Extension Pack
2. Prettier – Code formatter
3. Prettier Code Formatter Guide