What are the Top Visual Studio Code Extensions for Salesforce?

2
530
Top 10 VS Code Extensions
Top 10 VS Code Extensions

Dear #Trailblazers,

Welcome back 🙂 glad to see you all here and the agenda for this blog is to explain some top Visual Studio Code Extensions for you to boost the productivity while working with VS Code. Let’s talk them one by one.

Note: – All the extensions are listed based on my usage & importance you might wanted to use in different order.

#1 Salesforce Lightning code snippets

On top of my list, I have Salesforce Lightning code snippets VS Code extension which is very use-full while developing AURA Components or Lightning Web Components.

This extension contains code snippets (shortcut keys) for salesforce Lightning Design System and JavaScript in ES6 syntax for Vs Code editor (supports HTML, JavaScript and XML).

demo

Get this Extension from Here.

Official Link: https://marketplace.visualstudio.com/items?itemName=Nik-Creation.lwc-salesforce

#2 Apex Replay Debugger

Apex Replay Debugger simulates a live debugging session using a debug log that is a recording of all interactions in a transaction. You no longer need to parse through thousands of log lines manually. Instead, Apex Replay Debugger presents the logged information similarly to an interactive debugger, so you can debug your Apex code. The debugging process is a repetition of editing your Apex code, pushing or deploying the code to your org, reproducing the buggy scenario, downloading the resulting debug log, and launching Apex Replay Debugger with that debug log.

DO NOT INSTALL THIS EXTENSION DIRECTLY. Install the complete Salesforce Extension Pack instead.

Note: If you have Salesforce Extension Pack installed then you no need to install this extension. Tough you can get it https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-vscode-apex-replay-debugger

#3 SalesforceDX Code Companion

Provides ability to save Apex Classes,Apex Triggers, Visualforce, AuraBundles, Lightning Web Component Bundles(under preview) and ApexComponents to Salesforce Org at blazing speed without source tracking. Also enables retrieving code from the salesforce unmanaged package/changesets in both DX and NonDX source formats .You can also switch between authenticated orgs easily with CCDX: Switch Command. This extension requires users to have SalesforceDX CLI and also mo-dx-plugin(run sfdx plugins:install mo-dx-plugin) for SalesforceDX CLI.This Extension works with both scratch orgs and Non-scratch orgs.

Retrieve Source From Unmanaged/Managed Package In DX Format
Manage conflict

You can get the Extension here https://marketplace.visualstudio.com/items?itemName=MohithShrivastava.dx-code-companion

#4 Salesforce Package.xml Generator Extension for VS Code

On #2, I have Salesforce Package.xml Generator Extension for VS Code

If you are a developer or part of deployment you are going to love this extension.

This extension provides a User Interface to choose metadata components for Package.xml file for development against sandboxes or DE orgs (Org Development Model with VS Code). This is similar to Eclipse Force.com IDE Add/Remove Metadata Components option.

Screenshot 1
Screenshot 2

Get it from VS Code market place. Official Link : https://marketplace.visualstudio.com/items?itemName=VignaeshRamA.sfdx-package-xml-generator

#5 Apex PMD

Allows you to run Apex Static Analysis directly in vs code on apex & VisualForce files.

Apex PMD

Current actions Supported

  • Run analysis on file open
  • Run analysis on file save
  • Run analysis on file change (new!)
  • Run analysis on the entire workspace
  • Run analysis on a single file
  • Ability to define your own ruleset

You can get the extension from market place. Click https://marketplace.visualstudio.com/items?itemName=chuckjonas.apex-pmd

#6 Git History, Search and More (including git log)

  • View and search git log along with the graph and details.
  • View a previous copy of the file.
  • View and search the history
    • View the history of one or all branches (git log)
    • View the history of a file
    • View the history of a line in a file (Git Blame).
    • View the history of an author
  • Compare:
    • Compare branches
    • Compare commits
    • Compare files across commits
  • Miscellaneous features:
    • Github avatars
    • Cherry-picking commits
    • Create Tag
    • Create Branch
    • Reset commit (soft and hard)
    • Reverting commits
    • Create branches from a commits
    • View commit information in a treeview (snapshot of all changes)
    • Merge and rebase

Open the file to view the history, and then Press F1 and select/type “Git: View History”, “Git: View File History” or “Git: View Line History”.

Image of Git Log
Image of File History
Image of Compare

Get it https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

#7 GitLens — Git supercharged

GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.

GitLens Preview

Get it from here: https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

#8 vscode-icons

Bring icons to your Visual Studio Code (minimum supported version: 1.31.1)

demo

Get it from VS Code market place https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

#9 Better Comments

The Better Comments extension will help you create more human-friendly comments in your code.
With this extension, you will be able to categorise your annotations into:

  • Alerts
  • Queries
  • TODOs
  • Highlights
  • Commented out code can also be styled to make it clear the code shouldn’t be there
  • Any other comment styles you’d like can be specified in the settings
Annotated code

Get it from here https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

#10 Bracket Pair Colorizer

This extension allows matching brackets to be identified with colours. The user can define which characters to match, and which colours to use.

Screenshot

Get it from here https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

#11 Prettier – Code formatter

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

Get it from here https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Thank you all 🙂

#KeepLearning #KeepSharing #Askpanther #SfdcPanther

2 COMMENTS

  1. This article is worthy of recognition and comment. I found this material attention-grabbing and engrossing. This is well-scripted and highly informative. These views appeal to me. This is how real writing is done. Thank you.

LEAVE A REPLY

Please enter your comment!
Please enter your name here