Visual Studio Code

How to start your development on VSCode for LWC ( Lightning Web Components ) Salesforce?

Setting up Visual Studio Code

VS Code is a free lightweight code editor which runs on macOS, Linux and Windows operating systems.Follow the platform specific guides below:

or you can go to YouTube Link

Step 1) Install VsCode. Click here to download.(Please use 1.24 version)

Installation Steps for Visual Studio Code on Windows

  1. Download the Visual Studio Code installer for Windows.
  2. Once it is downloaded, run the installer (VSCodeUserSetup-{version}.exe). This will only take a minute.
  3. By default, VS Code is installed under C:users{username}AppDataLocalProgramsMicrosoft VS Code.

Installation Steps for Visual Studio Code on Ubuntu

The easiest way to install Visual Studio Code for Debian/Ubuntu based distributions is to download and install the .deb package (64-bit), either through the graphical software center if it’s available, or through the command line with:

sudo apt install ./<file>.deb

# If you’re on an older Linux distribution, you will need to run this instead:

# sudo dpkg -i <file>.deb

# sudo apt-get install -f # Install dependencies

Installing the .deb package will automatically install the apt repository and signing key to enable auto-updating using the system’s package manager. Note that 32-bit and .tar.gz binaries are also available on the VS Code download page.

The repository and key can also be installed manually with the following script:

curl https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > microsoft.gpg

sudo install -o root -g root -m 644 microsoft.gpg /etc/apt/trusted.gpg.d/

sudo sh -c 'echo "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main" > /etc/apt/sources.list.d/vscode.list'

Then update the package cache and install the package using:

sudo apt-get install apt-transport-https

sudo apt-get update

sudo apt-get install code # or code-insiders

Installation Steps for Visual Studio Code on mac OS

  1. Download Visual Studio Code for macOS.
  2. Double-click on the downloaded archive to expand the contents.
  3. Drag Visual Studio Code.app to the Applications folder, making it available in the Launchpad.
  4. Add VS Code to your Dock by right-clicking on the icon to bring up the context menu and choosing Options, Keep in Dock.

Step 2) Install SFDC CLI 

Step 3) Install the Salesforce Extension for VS Code. and “ForceCode” Extensions.

Step 4) Restart the VS Code.

Creating a void project with manifest

Step 1) Press Ctrl+Shift+P and select create project with manifest command

Step 2) Enter project name for local machine folder creation and select the position where you want to store the project files.

Step 3) Press Ctrl+Shift+P and select authorise an org to get the org connected with local folder.

Step 4) Select the org base url and enter a name of connection which would be used locally to denote the unique credentials at VSCode.

Step 5) A browser window will open up automatically , enter org credentials and login. Once login is successful, go back to VSCode It will show up success message with an information at the centre bottom to close the browser window as authorisation is complete now.

Taking Refresh from Salesforce Org.

Step 1) Open Package.xml file which comes under manifest folder

Step 2) Right click and select refresh from manifest. This will start up the refresh process and It may take couple of minutes to complete. Once refresh is complete it will show a flash message popup at bottom else error popup will show.

Creating basic Lightning Web Component

For creating a LWC file just right click on lwc folder under force-app. And select create lightning web component . Then Enter desired file name sand enter this will create a basic Lightning web component locally.

Deploy Lightning Web Component to Salesforce Instance

For deployment of that component just double click on the lightning web component file and select “Deploy this from source to Org” and this will deploy the current file to connected Salesforce Environment.

Leave a Reply

Your email address will not be published. Required fields are marked *