Setting up VSCode for Salesforce LWC

One of the most important tools that are a must for any developer is an IDE (Integrated Development Environment). It’s a tool which lets to connect to your development environment and supports version control, the ability to use extensions, the ability to write scripts to automate some monotonous tasks etc. VSCode is the recommended tool for Salesforce development and in this article, we are going to see how to set up VSCode for Salesforce LWC and Apex development.

This setup will involve installing some tools or software and configuring extensions/ plugins that support the Salesforce development environment in our local system.

1. Download and Install VSCode

VSCode is the IDE that we are going to use for our development activities. Download the VSCode IDE from here

2. Install Salesforce DX CLI tool

Salesforce DX CLI is required as it contains the essential functionalities which do the heavy-lifting task of communicating with Salesforce metadata. Install the Salesforce DX CLI tool from here.

3. Install Salesforce Extension Pack in VSCode

Open your VSCode and go to the Extensions menu on the left, search Salesforce Extension Pack and install it. These extensions make use of the Salesforce CLI and make it easy for us to use the CLI commands, without having to type and remember any of these commands.

The Salesforce Extension Pack installs all the below extensions automatically:

• Apex
• Apex Interactive Debugger
• Apex Replay Debugger
• Salesforce CLI Integration
• Aura Components
• Visualforce
• Lightning Web Component
• SOQL
• SLDS Validator

4. Checking if tools are installed properly using CLI/ Terminal

Before you can start using Salesforce CLI in VSCode, you need to make sure it’s installed properly and its commands are recognized by the operating system.

If you are on Windows, open your command prompt and type SFDX to see what response you get. If the CLI is installed properly that means the path is set and you will see details of the SFDX CLI tool like versions, commands etc.

If the SFDX CLI is not installed properly, then you will see an error response something similar to the below screenshot.

'sfdx' is not recognized as an internal or external command.

5. Setting up the Environment variable in your system

If you are getting the above error when typing SFDX Command in your command prompt terminal. This means your Salesforce CLI path is not set up correctly and you need to configure your environment variable path.

Step 1: Navigate to the location where SFDX CLI is downloaded, open the bin folder and copy the complete URL from the address bar. Make sure to keep this location handy as this will be required during the setting path variable in Step 5 (below).

Step 2: From your windows start menu, search for environment variable and click on the Edit the system environment variables option that is displayed.

Step 3: The system Properties screen pops up. Click on the Environment Variables button at the button, to enter the System Variables screen.

Step 4: The environment variable screen pops up. This is where you create all the system variables.

Select the Path variable and click on the Edit button.

Step 5 The edit screen appears, click on new and paste the path of your Salesforce CLI (with bin folder)

Note: Click ok and close the System Properties popup for the changes to take effect. Also, make sure to close all the Command prompts if they are open or else path changes might not reflect correctly.

Open a new Command window and now enter SFDX, this time you should successfully see all the details of the Salesforce CLI plugin. This means you are now ready to use the CLI for your development activities.

6. Authorizing an Org in VSCode and creating a Project

Now that we are ready with all the software installations and environment variable configurations, we now need to connect to our Salesforce Org to start development and deploy the changes.

In the next article, we are going to show you all the steps to authorize VSCode with Salesforce Org and how to use the Salesforce CLI commands in VSCode.

Closing Thoughts

Do let me know in the comment box below if this article helped you set up the VSCode or if you are still facing issues. I will give my best to respond to your comments and resolve any issues.

Share this article with your friends and also subscribe to my newsletter to get notified of any new articles getting published.