We follow Salesforce’s official recommendation to use Visual Studio Code (VSCode for short) for Salesforce development. Immediately, our first question is – what are Top 10 VSCode Extensions For Salesforce development to boot up the working efficiency? I have spent some time compiling this top 10 best VSCode Extensions for Salesforce, and extra best VSCode extensions for Salesforce. I hope it adds value to you!
In case you don’t know what VSCode is, it is the Salesforce recommended code editor. It’s free, open-sourced, and running across platforms – Windows, Linux, and MacOS. You can download it on the official site.
Table of Contents
Top 10 VSCode Extensions For Salesforce Developers
The extensions in the list are in the order of importance according to my personal view.
Salesforce Extension Pack
This extension pack is developed by Salesforce. It’s a one-stop-shop for Salesforce development, providing features for interacting with Salesforce orgs, developing with Apex, Aura components, LWC, Visualforce, and so on.
This extension pack uses Salesforce CLI behind the scene, which in turn requires Java Development Kit (JDK). Therefore, you need to have both of them installed as prerequisites.
Extension pack indicates that it is a combination of multiple extensions, including:
- Salesforce CLI Integration – This extension allows VSCode to interact with Salesforce CLI to provide core functionality.
- Apex – This extension implements an Apex Language Server to provide features such as Apex syntax highlighting and code IntelliSense.
- Apex Interactive Debugger – This extension allows VSCode to use the real-time Apex Debugger to diagnose code logic.
- Apex Replay Debugger – This extension allows VSCode to download the Alex debug logs and replay for debugging purposes.
- Lightning Web Components – This extension enables LWC development features. It uses the HTML language server from VSCode.
- Aura Components – This extension enables Aura component development features. It also uses the HTML language server from VSCode.
- Visualforce – This extension enables the Visualforce pages development features. It uses both the Visualforce Language Server and the HTML language server from VSCode.
Prettier – Code formatter
A Code formatting tool was a long waiting feature in Salesforce and Prettier came to fill in this gap.
In VSCode, we can even enable the auto-formatting when saving files. I have created a detailed step-by-step post (video included) to walk you through how to configure Prettier in VSCode.
Apex PMD
PMD is a static code analysis tool. If you don’t know what it means, you can listen to the PMD podcast episode in the SalesforceWay Podcast I had with Robert Soseman, the author of Apex PMD.
Apex PMD is also the name of the VSCode plugin. It enables VSCode to use PMD to detect and notify issues in your Apex code. The plugin includes a default setting which works plug-and-go and facilitates you to get familiar with this tool.
Salesforce Package.xml Generator
When interacting with Salesforce traditional orgs (sandbox and production), a package.xml file can be used to indicate what meta-data files are used for the communication.
This extension allows you to use VSCode UI to select metadata files, and then automatically generate the package.xml file content for you. It saves the hassle of remembering what metadata file types map to what XML format. A really neat tool.
Settings Sync
Settings Sync allows you to store in and retrieve your VSCode settings from Github. It uses GitHub Gist to store your settings, including:
- All extensions and configurations
- Setting files
- Keybinding file
- Snippets folders
- Workspace folders
When you need to sync settings among multiple computers or have a new computer, Setting Sync extension can drastically save your time.
Note – A VSCode built-in Settings Sync feature is in preview at the time of writing. We need to see whether it can replace the extension or not.
TabNine
TabNine is an all-language autocompleter. It uses deep learning to prompt code completion suggestions. It is zero configuration and works out-of-box.
What I can say is – this plugin is amazing. It works without any configuration needed. Install it and see the amazing suggestions appear in the VSCode code suggestion! Give it a try for several days, you will get addicted to it :).
TabNine has features including:
- reads the .gitignore to determine which files to index in the project folder
- uses the VSCode mnemonic completion engine to suggest long variable names
- Is highly responsive – produces a list of suggestions typically in less than 10 milliseconds.
TabNine offers client versions for popular editors such as VSCode, Vim, Emacs, IntelliJ, and so on.
GitLens
VSCode comes with a default Git tool that allows you to do common Git actions such as staging, unstaging, and committing.
If you need to quickly glimpse into the code line and see who, when and why(the commit message) a line or code snippet was changed, GitLens, an open-source free extension is a right choice for you.
GitLens offers powerful features for you to better understand code.
ESLint
It’s easy to stress the importance of this extension. If you use JavaScript (LWC, Aura?), you need ESLint.
ESLint statically analyzes JavaScript code to quickly find problems. It is the JavaScript version of PMD if you will :).
Auto Rename Tag
As Salesforce developers, we often work with markup languages, such as XML, HTML. Auto Rename Tag extension automatically rename paired tags, so we don’t need to edit twice the opening and closing tag.
Bracket Pair Colorizer 2
Bracket Pair Colorizer 2 extension does one simple job and does it well – colorize matching brackets so they are easily identified.
Note – Both Bracket Pair Colorizer and Bracket Pair Colorizer 2 exist. Despite having the same bracket parsing engine, Version 2 greatly increases speed and accuracy. If you don’t have a setting file from version 1 or you are new to this extension, you should stick to version 2.
Other Best VSCode Extensions For Salesforce
Best VSCode extensions for Salesforce don’t stop with the Top 10 list. These are the other ones I consider add great values to the development too. Let’s check what they.
Live Share
If you are a Salesforce developer, chances are you are working in a team and need to collaborate with mates with the same codebase. A similar analogy is the google doc collaborative feature.
When you start a collaborative session, others can join and view the context of the workspace in their VSCode editor. This means they can read the code without having to clone a repo or install any dependencies your code relies on. Moreover, they can use rich language features, such as Go to Definition or Peek, to navigate within the code.
Code Spell Checker
This tool underlines common word spelling errors both in your code and in the comments and gives fix suggestions.
Polacode
This tool allows you to take fancy-looking code snippet pictures in VSCode. Check how it works as demonstrated below.
Trailing Semicolon
This extension allow you to append semicolon to the end of current line without moving the cursor.
Think about how many times you need to add/remove semicolons?
VSCode Great Icons
What this extension does all is to change the default ugly-looking icons into modem ones.
You spend 5+ hours per day with VSCode, you deserve a better UI :).
Vim
I save the last slot for Vim extension, not because it’s the least useful but because of its specialty.
If you are a vim user, the first thing you aks when touching any new editor is – “Does it support vim key”? Vim extension in VSCode does an amazing job. It simulates most of the commonly used vim commands.
Wrap up on Top 10 VSCode Extensions For Salesforce development
Here you go, the Top 10 VSCode Extensions For Salesforce development and the extra best VSCode extensions for Salesforce!
What’s your thought? Any extension that is more important than the ones on the list? Leave comments below and let’s chat :)!
https://marketplace.visualstudio.com/items?itemName=Audibene.salesforcecodesnippets
Recently launched extension. Give it a try
Hi Xi, I developed this free extension to increase productivity on vscode.
Some of its features:
1) You can get quickly the code coverage of your classes and check the covered/uncovered lines for any test method.
2) You can open the metadata in salesforce in the browser directly from the XML file in vscode!
Give it a try!🙂
https://marketplace.visualstudio.com/items?itemName=RaffaelePreziosi.apexgetcoverage
Very good content.