Connect Salesforce with VS Code for LWC in Windows

Follow this complete step-by-step guide to connect Salesforce with Visual Studio Code (VS Code) for Lightning Web Component (LWC) development on Windows operating system.

Step 1: Install Visual Studio Code

Download VS Code from official website:

https://code.visualstudio.com/

Install it like normal Windows software.

Step 2: Install Node.js

LWC development requires Node.js.

Download Node.js:

https://nodejs.org/

Install LTS version.

After installation open Command Prompt and verify: 

node -v
npm -v

If version appears, Node.js installed successfully.

Step 3: Install Salesforce CLI

Download Salesforce CLI for Windows:

https://developer.salesforce.com/tools/salesforcecli

Install using Windows installer.

Verify installation: 

sf --version

Step 4: Open VS Code

Launch Visual Studio Code.

Step 5: Install Salesforce Extension Pack

In VS Code:

  1. Click Extensions Icon
  2. Search: Salesforce Extension Pack
  3. Click Install

This extension includes:

  • LWC Support
  • Apex Support
  • SOQL
  • Debugger
  • CLI Integration

Step 6: Create Salesforce Project

Open Terminal in VS Code: 

Terminal → New Terminal

Run command: 

sf project generate --name lwcProject

Open project folder: 

cd lwcProject

Step 7: Login Salesforce Org

Run command: 

sf org login web

Browser will open automatically.

Login with your Salesforce account.

After successful login Salesforce org will connect with VS Code.

Step 8: Set Default Org

Run: 

sf config set target-org myOrg

Step 9: Create LWC Component

Run command: 

sf lightning generate component --name helloWorld --type lwc

Component folder created inside: 

force-app/main/default/lwc

Step 10: Add LWC Code

helloWorld.html

<template>
    <lightning-card title="LWC Example">
        <h1>Hello Salesforce LWC</h1>
    </lightning-card>
</template>

helloWorld.js

import { LightningElement } from 'lwc';

export default class HelloWorld extends LightningElement {

}

helloWorld.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>64.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>
        <target>lightning__HomePage</target>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
    </targets>

</LightningComponentBundle>

Step 11: Deploy Component

Deploy full project: 

sf project deploy start

Or deploy only component: 

sf project deploy start --source-dir force-app/main/default/lwc/helloWorld

Step 12: Open Salesforce Org

sf org open

Step 13: Add Component to Lightning Page

  1. Go to Setup
  2. Open Lightning App Builder
  3. Edit Home Page or App Page
  4. Drag LWC component
  5. Save & Activate

Important Commands

Command Purpose
sf org login web Login Salesforce Org
sf org open Open Salesforce Org
sf project deploy start Deploy Project
sf project retrieve start Retrieve Metadata
sf apex run test Run Apex Test

Recommended VS Code Extensions

  • Salesforce Extension Pack
  • Prettier
  • GitLens
  • Material Icon Theme

Final Result

Now your Windows system is ready for Salesforce LWC development using VS Code.

  • Create LWC Components
  • Write Apex Code
  • Deploy Code
  • Retrieve Metadata
  • Debug Applications
  • Build Salesforce Projects