How to setup prettier for apex in VSCode?

Hello Trailblazers,

In this post, we're going to learn how to setup prettier for apex in VSCode. We're going to use a plugin named as prettier-plugin-apex. Once you've created a salesforce project, the first step is to install Prettier - Code formatter extension.

Click on the Extensions Tab in the left sidebar in your VSCode and search for prettier as shown below:

The first option that you'll see is for Prettier - Code Formatter open that and click on the Install button.

Once you have installed prettier, now it's time to install prettier-plugin-apex. You can install the plugin in your project only by running the command given below:

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

The output of the above command is given below:

Please note that this will install prettier-plugin-apex locally in your project. If you want to install it globally so that you can use it in all the projects, you can use the below command:

npm install --global prettier prettier-plugin-apex

If you've installed it locally, it'll the package.json file in your salesforce project and you'll find the entry for prettier under scripts as shown below:

So, if you want to run prettier for your project, you can run it by executing the below command:

npm run prettier

I tried this command in my project, so you can see the sample output below:

You'll see that the apex files are also formatted. Let's have a look at the test class formatted using prettier, that we created for salesforce flow in the previous post:

As you've formatted the whole project once, a better option is to setup prettier so that it formats the file automatically as you save it. You can do that by following the below steps:

1. Open the command pallette (Ctrl + Shift + P for Windows, Command + Shift + P for Mac) and search for User settings.

2. Click on Preferences:Open User Settings as shown above and search for format on save

Click the Editor: Format On Save checkbox under the User tab as shown above. Also click the same checkbox under the Workspace tab as shown in the below screenshot:

Now your apex file will format automatically using prettier as you save it. Congratulations!! You've successfully setup prettier for apex in VSCode and it's ready for use.

That's all for this tutorial. I hope you liked it. Let me know your feedback in the comments down below.

Happy Trailblazing!!