Salesforce With Deepak
← Back to Resources
VS Code Setup

Step-by-step VS Code setup for Salesforce development

This guide walks you from installation to your first Salesforce project, with practical examples and screenshots for each important step.

1. Install Visual Studio Code

Download and install VS Code from the official site. This becomes your main editor for Apex, LWC, and metadata files.

  • ✓Install the latest stable version
  • ✓Open the Extensions panel
  • ✓Keep the editor updated regularly
Visual Studio Code setup screen

2. Install Salesforce CLI

Install Salesforce CLI so you can authenticate orgs, create projects, and deploy metadata from the terminal.

  • ✓Install Node.js first if needed
  • ✓Run the Salesforce CLI installer
  • ✓Verify with sf --version
Salesforce CLI installation terminal

3. Install the right extensions

Extensions make Salesforce development faster by adding Apex support, LWC helpers, code formatting, and debugging help.

  • ✓Install the Salesforce Extension Pack
  • ✓Add formatting and linting tools
  • ✓Use GitLens for version control history
VS Code extensions marketplace screen

4. Create your first Salesforce DX project

Create a new project with a sample name such as my-salesforce-app and connect it to a scratch org.

  • ✓Create a folder for the project
  • ✓Run the command in the terminal
  • ✓Open the project in VS Code
Salesforce project creation in VS Code

5. Connect to a Salesforce org

Authenticate to a login org or a scratch org so you can push and pull metadata safely.

  • ✓Log in with sf org login web
  • ✓Create a scratch org
  • ✓Deploy or retrieve metadata
Salesforce login and org authentication screen

Why each extension matters

Salesforce Extension Pack

Provides core Salesforce tools for Apex, LWC, and SFDX workflows.

Example: Use it to scaffold a new Aura component or open a Lightning component in a project.

Apex

Adds Apex syntax highlighting, IntelliSense, and better code navigation.

Example: Write trigger logic and service classes with autocomplete and error hints.

LWC/Lightning

Helps with Lightning Web Components markup, JavaScript, and metadata awareness.

Example: Build a lightning-card or wire service component with easier authoring support.

Prettier - Code formatter

Keeps Apex, JavaScript, and HTML files consistently formatted.

Example: Format a new LWC component before saving it to your repository.

ESLint

Catches common mistakes and coding issues while you write JavaScript.

Example: Spot issues in a JavaScript controller before you deploy it.

GitLens

Shows code history and who changed what in your Salesforce project files.

Example: Review how a class or component evolved across team commits.

Create your first project

  1. 1. Open the terminal in VS Code and create a new Salesforce DX project.
  2. 2. Use a meaningful name such as my-salesforce-app for your first app.
  3. 3. Authenticate to a dev hub or create a scratch org to test your changes.
  4. 4. Start building Apex classes, LWC components, and custom objects inside the project.
sf update
sf plugins install @salesforce/sfdx-scanner
sf org login web -r https://login.salesforce.com
sf project create -n my-salesforce-app -t standard
sf org create scratch -f config/project-scratch-def.json -a devhub -d -y 30

Example workflow

Example: create a new Apex class, add an LWC component, and deploy it to a scratch org to see your changes in Salesforce.

Example Salesforce project workflow