VS Code is becoming the most popular Salesforce IDE, but unfortunately, VS Code does not have a default code formatter for Apex! For that, we can use some extensins like Prettier and/or Uncrustify. In this post, I will explain how I installed Prettier, and in the next post I will explain about Uncrustify.

 

Install Node.Js on your computer:

To begin, Node.JS should be installed on your computer. If it is not installed yet, follow these steps: 

• Go to: https://nodejs.org/en/download/
• Depending on your OS, download the right package. In my ase, I got the Windows 64-bit MSI file. 
• Choose the installation folder. I picked: C:\Program Files\nodejs\
• Make sure that “Add to PATH” installation option is checked. 

Now, add the Node.JS Extension Pack extension to VS Code:

• Go to the Extensions tab in VS Code
• Search for “Node.js Extension Pack“
• Add it to VS Code
• Restart VS Code 

Once VS Code is restarted, let’s install Prettier.

 

Install Prettier:

• First, you don’t already have a package.json in your project, run the command “npm Init”. Check the left Explorer pane to see if this file exists, or search for it usong Ctrl + P. 
  • Go to the Terminal tab, and type “npm init”. Or, press Ctrl + Shift + P, and choose “npm: Run Init”
  • Accept all the defaults
• Note that this step should be done once per org.

• Install Prettier by running in the Terminal: npm install --save-dev --save-exact prettier prettier-plugin-apex
• This should be done for each org. 
• Create a Prettier configuration file called .prettierrc, in the root of your project, by right clicking on the left Explorer pane, and selecting “New File”. The file should be called .prettierrc, with a dot at the beginning. 
• Copy and paste the below content and paste them int the file. Save the file.

{
    "trailingComma": "none",
    "overrides": [
      {
        "files": "**/lwc/**/*.html",
        "options": { "parser": "lwc" }
      },
      {
        "files": "*.{cmp,page,component}",
        "options": { "parser": "html" }
      }
    ]
  }

• If you’d like to further customize Prettier, add other config options.

• Install the Prettier extension for VS Code:
• Go to the Extensions tab in VS Code
• Search for “Prettier Code Formatter
• Add it to VS Code
• Restart VS Code

 

Run Prettier:

• To Run Prettier to format code, open any Apex file, then press Ctrl + Shift + P
• Search for the word “Format” 
• Choose “Format Document” 
• Select the Prettier Formatter. This option will only be displayed if you have multiple formatters. In my case, I have both Prettier and Uncrustify. 
• You can avoid all these steps by simple pressing Shift + Alt + F to format the whole document, or Ctrl + K Ctrl + F to format the selection only. 

As you can see, my Apex file has been formatted! 

 

Notes:

• If you want to ensure that all your files are formatted, enable the setting editor.formatOnSave in VS Code. For information about configuring your settings, see User and Workspace Settings in the Visual Studio Code docs.

• Apex Prettier runs slower than most other formatters. In some cases formatting will not succeed because VS Code will time out the operation after 500ms. In order to ensure Apex code has enough time to format your documents we recommend changing the VS Code settings as follows.

{
  "editor.formatOnSaveTimeout": 5000
}

This can be done also from the File – Preferences – Settings. Search for Format. This is where you can also configure many settings for Formatting, liek the efautl Formatter, fortmat on PAste and so on…