Salesforce Extensions for Visual Studio Code This extension pack includes tools for developing on the Salesforce platform in the lightweight, extensible VS Code editor. These tools provide features for working with development orgs (scratch orgs, sandboxes, and DE orgs), Apex, Aura components, and Visualforce.

Install Salesforce Extensions for Visual Studio Code

Visual Studio Code is the go-to code editor for Salesforce developers. It's free, open-source, and available for Windows, Linux, and macOS. This editor has easy-to-install extensions for syntax highlighting, code completion, and more.

Easily integrate with cloud services like Azure Mobile Services, Salesforce and Office 365 with the Visual Studio Services Manager for Connected Services. Seamlessly manage your servers, services and databases with features like Server Explorer and Data Sources.
Visual Studio Code download and setup. The first step is to download the Visual Studio Code. Go to the official VSC website, and download the latest version for your system. VSC is supported for Windows, Mac and Linux. After downloading the installer, simply follow the instructions to.

In this project, we install Visual Studio Code and the recommended Salesforce Extension Pack.

Download and install the latest version of Visual Studio Code for your operating system. If you already have Visual Studio Code installed, there’s no need to reinstall it.
Launch Visual Studio Code.
On the left toolbar, click the Extensions icon .
Search for Salesforce Extension Pack and click Install.

Note

Some features, particularly Apex support, in Salesforce Extensions for Visual Studio Code depend on the Java Platform, Standard Edition Development Kit (JDK). Only JDK 8 and 11 are supported. If you have another version of Java installed, you need to also install JDK 8 or JDK 11. Once you install the right JDK, use the following links to configure your setup:

Ensure Your Development Environment Is Ready

Westover educated book. Now that you’ve installed Visual Studio Code and enabled the necessary extensions, you need to test them out.

In Visual Studio Code, open the Command Palette by pressing Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS).
Enter sfdx to filter for commands provided by the Salesforce Extensions.

As you use more SFDX commands, those commands will show up in the recently used panel.

In the final step, you create your first Lightning web component and add it to your org’s home page.

We won’t check any of your setup. Click Verify Step to go to the next step in the project.

If you are working with Salesforce Commerce Cloud, then you know that before you start, you need to choose the right editor. There is no right or wrong when it comes to editors. You can choose editors based on your own preferences. There are, however, some characteristics of the editors you should take into account before you make your decision. Also, new tools for development are being launched almost every day, so you also need to see how these tools can help you. For the development in SFCC, I prefer Visual Studio Code or Eclipse. In this tutorial, I will show you how to setup VSC for Salesforce Commerce Cloud development.

Why Visual Studio Code for SFCC development?

VSC is one of the most popular editors today. It is an open-source editor which makes it quite attractive to developers, built in git client and it’s lightweight. We all like this and need this. However, from my experience, the main advantage of VSC over Eclipse (and other editors) is speed. VSC has faster cartridge uploading and a better templating engine, which is more attractive to most developers. VSC can be easily extended with extensions and it provides some cool and effective features, such as IntelliSense that analyzes code and the semantics of what you are inputting. To sum up, it’s built to save you time and help you be more effective. Now, let’s jump to the installation process.

Visual Studio Code download and setup

The first step is to download the Visual Studio Code. Go to the official VSC website, and download the latest version for your system. VSC is supported for Windows, Mac and Linux.

After downloading the installer, simply follow the instructions to install VSC on your machine. Once your installation is done, you will see the following screen.

And you are ready to go on.

Install & configure Prophet Debugger

There are two ways to install Prophet Debugger. I will show you both of them, and you can choose the one you prefer more.

1. Navigate to your extensions section in VS Code

Click on the icon marked on the screen below:

In the search section, type Prophet Debugger, and press install.

That’s it!

2. Install Prophet Debugger extension from the Marketplace

The second way to install Prophet Debugger is to install it directly from the Marketplace. Go to the website and click the install button.

Use Visual Studio Code For Salesforce Development

By pressing the button, you will be prompted with a modal which will try to launch Visual Studio Code, and then press continue.

This will launch the VS Code app, and you will land on the same page as in the first approach. Press install and you are all done. Now, let’s move to Salesforce Commerce Cloud.

Adding SFCC in the mix

If you are starting a new project, you can find storefront core cartridges in the GitHub repository. There are 3 different architectures in SFCC:

Pipelines
Controllers
SFRA

A few things to know about architectures

The oldest architecture is based on pipelines, and some projects are still using them.

However, more and more projects are built with Controllers or SFRA. We highly recommend SFRA as it has more advantages when compared to the old architectures.

To find Controllers and Pipelines, follow this link and to find SFRA, go to GitHub.

Before accessing repositories, you need to have the SFCC account, the xChange account and a connected GitHub account to your SFCC account. Once you got your repository setup with cartridges, you can proceed with setting up a digital server connection.

Use Visual Studio Code For Salesforce Development Challenge

To connect your Visual studio code to SFCC sandbox, you need to create a few json configurations. First, you need to create a .vscode folder in your root directory. So, in .vscode directory, create two files in the following order:

launch.json
settings.json
SFRA

In the root of your project, create another json file called dw.json.

In this json, you are setting your credentials for your sandbox instance.

In cartridge array, you can define your cartridges related to your project. This is a basic SFCC setup, so no additional cartridge is added.

If you want to automatically upload all cartridges within your project, you can simply omit cartridges attribute from dw.json configuration. By placing dw.json in the root folder of your project, prophet will automatically look through all folders and find all cartridges for you.

Salesforce Vs Code Setup

Code-version is a version created on your sandbox and the name can differ, so once you get your sandbox, check which version you need to use in Administration > Site Development > Code Deployment.

Note: do NOT share your dw.json file, since you will share your personal details with the third party!

Visual Studio Code Extensions For Salesforce

To activate your prophet, connect to your sandbox and start uploading your cartridges, open up the search bar and type Prophet: Enable Upload.

A hint: To open the search bar on Windows - press ctrl + shift + p, on Mac - command + shift + p.

Once you enable the cartridge upload, you will see the similar output in your console:

Visual Studio Code For Salesforce Dx

Wrapping up

If you’ve followed the steps, you are now