how to setup visual studio code and salesforce dx

Hi All :). Welcome again and in this post, we are going to learn how to setup Visual Studio and Salesforce DX.

Step 1: – Download VS Code

You can download VS Code from below link and install in your pc :- https://code.visualstudio.com/Download

Step 2: – Download Salesforce CLI

Download the Salesforce CLI and install into your machine. Download for the appropriate Operating system.

Operating System	Link to Installer
macOS	https://sfdc.co/sfdx_cli_osx
Windows 32-bit	https://sfdc.co/sfdx_cli_win
Windows 64-bit	https://sfdc.co/sfdx_cli_win64
Debian/Ubuntu 64	https://sfdc.co/sfdx_cli_linux  Download the archive from one of the URLs in the manifest, extract the archive, then run the ./install script.
Debian/Ubuntu x86	https://sfdc.co/sfdx_cli_linux_x86  Download the archive from one of the URLs in the manifest, extract the archive, then run the ./install script.

Step 3: – Download “Salesforce Extensions pack”

After you have installed the Visual Studio Code in your machine. Go to below link and install the extension.
If it asks to open with VS code then click “Open with Visual Studio Code”

https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-vscode

Step 4: – Install “Lightning Web Component” Extension

After you have done all the above steps, click on below link and install the extension. If it ask to open with VS code then click “Open with Visual Studio Code”

https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-vscode-lwc

• 

Step 5:- Install the latest salesforce dx

Open the command prompt and then run the below command. sfdx plugins:install salesforcedx@latest

Once you have successfully installed the latest version of Salesforce run the below command to update the CLI sfdx update

Once you have done all above steps and you are getting the output in your command like above image that means you have done each and every installation in a correct way. Next step is to start working with Salesforce DX and Lightning Web Components.

Create SFDX Project

Open Visual Studio, go to Command Palette (Use combination of ctlr + Shift + P) and type “sfdx: create project with manifest”. It will ask for project name give the and then select the location where you wanted to save your project. After project creation vs code will re start with the project files. And Check if the force-app contains a folder named “lwc“

• 

• 

Authorize with Dev Hub Org

Next step is to authorize a dev hub org and associate to the project.

Open the Command palette and then find “sfdx: authorize a Dev Hub” and then select the command.

Enable Dev Hub

Login into your DevHub Org and navigate to Setup -> Dev Hub -> Enable Dev Hub.

Create Default Scratch Org

After you enabled the dev hub org in your org, next step is to create the default scratch org. Go to command palette in visual studio code and find “sfdx: create a default Scratch Org…“. Select the command.

• Select Configuration file which automatically suggested by vs code
• give the alias name for the org
• give the no of days that you wanted to use scratch org. Maximum value is 30 Days.

above command will create a default scratch org associated with your Dev Hub Org.

Create a Lightning Web Component

Go to command palette and find “sfdx: Create Lightning Web Component” and select the same.

• 

• 

Push the code to Scratch Org

Open Command Palette and run “sfdx:push source to default scratch org“

Verify changes

Open Command Palette and run “sfdx:open default orgs“.

Sources & References

• https://trailhead.salesforce.com/content/learn/projects/quick-start-lightning-web-components/set-up-salesforce-dx
• https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.install_setup_develop
• https://developer.salesforce.com/docs/atlas.en-us.sfdx_cli_reference.meta/sfdx_cli_reference/
• https://trailhead.salesforce.com/content/learn/trails/sfdx_get_started