VS Code + Salesforce Setup Guide · Mia's Admin Playbook

1

Install VS Code

The code editor. Free. From Microsoft. ~5 min

1

Download VS Code

Go to code.visualstudio.com — it will auto-detect Windows and show you the download button. Click the big blue Download for Windows button.

code.visualstudio.com/download ↗

2

Run the installer

Open the downloaded file (it'll be something like VSCodeUserSetup-x64-1.xx.x.exe). Click through the installer — all defaults are fine.

✓ One setting to check On the "Select Additional Tasks" screen, tick "Add to PATH" if it's not already ticked. This lets you open VS Code from the terminal later.

3

Open VS Code

Launch it from Start menu or desktop. You should see a welcome screen with a dark sidebar on the left. That's it — VS Code is installed.

⚠ First-time popup Windows may ask "Do you trust the authors of files in this folder?" — click Yes, I trust the authors. You'll see this every time you open a new project folder.

2

Install Salesforce CLI

The tool that lets VS Code talk to your Salesforce org. ~5 min

What is the Salesforce CLI? Think of it like a remote control for your org that lives in your computer. The VS Code extensions use it behind the scenes to push and pull metadata, run deployments, and authenticate. You don't need to memorise commands — the extensions give you buttons for most things.

1

Download the Salesforce CLI

Go to the Salesforce CLI download page and get the Windows installer (.exe file).

developer.salesforce.com/tools/salesforcecli ↗

Look for Download for Windows. Run the installer — click through all defaults.

2

Verify it installed correctly

Do this before testing Close VS Code completely and reopen it before running the command below. The CLI installer updates your system PATH and VS Code won't pick it up until it restarts. Don't just close the terminal tab — close the whole application.

Once VS Code is back open, go to Terminal → New Terminal. A panel will open at the bottom. Type:

Terminal sf --version

You should see something like @salesforce/cli/2.xx.xx win32-x64. If you see that — you're good.

Still says 'sf is not recognised' after reopening? Do a full Windows restart — not just VS Code. Sometimes the PATH update needs a full system restart to take effect. After rebooting, open VS Code and try the command again.

3

Install the Salesforce Extensions

The VS Code plugins that give you Salesforce superpowers. ~3 min

1

Open Extensions panel

In VS Code, click the Extensions icon in the left sidebar (it looks like four squares, one slightly offset). Or press Ctrl + Shift + X.

2

Search and install the Salesforce Extension Pack

In the search box at the top, type exactly: Salesforce Extension Pack

The first result should be by Salesforce (blue tick, millions of installs). Click Install.

What this installs One click installs everything: Apex language support, Lightning Web Components support, Salesforce CLI integration, SOQL query runner, and more. You don't need to install them individually.

⚠ Do NOT install "Salesforce Extension Pack (Expanded)" In the search results you'll also see Salesforce Extension Pack (Expanded) — do not install this. It conflicts with the standard pack and will cause errors. You only need the plain Salesforce Extension Pack.

What you'll see in the extensions panel

SF

Salesforce Extension Pack — Salesforce · ★ 4.5 · Installing...

AP

Salesforce Apex Language Server (installs automatically)

LW

Lightning Web Components (installs automatically)

3

Reload VS Code when prompted

After install, VS Code will show a Reload Required button. Click it. The extensions activate on restart.

4

Create a Project and Connect Your Dev Org

The part where VS Code actually knows about your Salesforce org. ~10 min

Before you start You need a folder on your computer to store your project. Create one now — something like C:\Users\YourName\Documents\salesforce-dev. Don't use a OneDrive or cloud-synced folder for this — it can cause permission issues.

1

Open your project folder in VS Code

Go to File → Open Folder and navigate to the folder you just created. Click Select Folder. VS Code will reload with that folder open in the sidebar.

2

Create a new SFDX project

Press Ctrl + Shift + P to open the Command Palette. This is the most important keyboard shortcut in VS Code — it lets you search for any command.

Type: SFDX: Create Project with Manifest and press Enter.

Command palette — what to type

              > SFDX: Create Project with Manifest
            

It will ask for a project name — call it something like dev-org-project. Press Enter. Choose your folder when prompted. VS Code will create the project structure automatically.

3

Authorise (connect) your Developer Edition org

Press Ctrl + Shift + P again. Type: SFDX: Authorize an Org and press Enter.

It will ask: What type of org? — choose Production (Developer Edition orgs use the production login URL).

It will ask for an alias — type something easy like mydevorg.

Your browser will open automatically and take you to the Salesforce login page. Log in with your Developer Edition credentials. Click Allow when asked for permissions.

✓ Success looks like this VS Code terminal will show: Successfully authorized [youremail@example.com] with org ID 00D... and the bottom status bar of VS Code will show your org name.

The status bar shortcut Look at the very bottom of VS Code. You'll see your org name there. Click it any time to switch orgs or check which org you're connected to.

4

Pull metadata from your org (optional but useful)

To get a local copy of your org's metadata — LWCs, Apex classes, flows — right-click on the manifest/package.xml file in your sidebar and select SFDX: Retrieve Source in Manifest from Org.

⚠ Dev org only — don't do this on a real org without guidance This pulls your org's metadata to your local machine. For a Developer Edition org it's fine. For a production or sandbox org, make sure you know what you're doing first.

5

Install Claude Code

The part where Claude lives inside VS Code. No terminal required. ~5 min

What is Claude Code? Claude Code is a version of Claude that runs inside VS Code and can see your actual project files. Ask it about your org's metadata, get it to help you build or fix components, or diagnose errors — all with the context of your real project sitting right there. You need a Claude Pro subscription (or higher) to use it.

1

Install the Claude Code extension from the Extensions panel

Press Ctrl + Shift + X to open the Extensions panel. In the search box, type: Claude Code

Look for the extension by Anthropic and click Install.

What you're looking for in the Extensions panel

✳

Claude Code — Anthropic · The extension that puts Claude inside VS Code

✓ That's it — no terminal commands needed Installing the extension this way handles everything automatically in the background. You don't need to run any PowerShell commands or touch the terminal.

2

Sign in with your Claude account

After the extension installs, a sign-in prompt will appear. Click Sign in to Claude. Your browser will open — log in with the same Claude account you use at claude.ai.

Click Allow when asked for permissions, then return to VS Code.

You need a paid Claude plan Claude Code is included with Claude Pro ($20/month), Max, Team, and Enterprise. It is not available on the free plan.

3

Open Claude Code and test it

Press Ctrl + Esc to open the Claude Code panel. You'll see a chat input box appear — this is Claude, running with access to your project files.

Type this to test it:

Claude Code prompt What files are in this project?

✓ How to know it's working Claude should list your actual Salesforce project folders — force-app, manifest, lwc etc. If it does that, it's reading your real project. That's the difference between this and the regular Claude chat window.

🎉

Bonus: Install a real component from GitHub

Put your new setup to work straight away.

Try it now you're set up Now that VS Code, your org, and Claude Code are all connected, the fastest way to see it all working together is to install something real. The Confetti LWC guide walks through grabbing a component from GitHub, having Claude deploy it to your org, and dragging it onto a record page — paste a folder path, approve a few prompts, drag-and-drop to finish.

→ Install the Confetti LWC from GitHub

?

Common problems

Things that catch people out the first time. All tested on Windows.

Terminal says 'sf is not recognised' after installing the Salesforce CLI

Close VS Code completely and reopen it — don't just close the terminal tab, close the whole application. Open a new terminal and try again. If it still fails, do a full Windows restart. The CLI installer updates your system PATH and Windows sometimes needs a full reboot to pick it up.

The browser opened for org auth but nothing happened in VS Code

Check that you clicked Allow on the Salesforce permissions screen in the browser. VS Code waits for that confirmation before proceeding. If you closed the browser window before clicking Allow, run the authorise command again from the Command Palette (Ctrl+Shift+P → SFDX: Authorize an Org).

Claude Code extension installed but Ctrl+Esc doesn't open anything

Try Ctrl+Shift+P and search for "Claude Code" to find the open panel command manually. If nothing appears, reload VS Code — go to Ctrl+Shift+P → "Reload Window". If you're still not signed in, the panel will prompt you to log in first.

Claude Code asks me to sign in every time I open VS Code

This can happen if VS Code doesn't have permission to store credentials. Try signing in again — it's quick. If it keeps happening, check that you're running VS Code as your normal user (not as Administrator), as credential storage behaves differently in elevated mode.

Deployment failed — 'This component is not available for this page type'

Open your js-meta.xml file and check the <targets> section. It needs to include lightning__AppPage or lightning__RecordPage depending on where you want to place it. Ask Claude Code to fix the meta file for you — paste the error and it will diagnose it against your actual file.

Deployment failed — API version error

The API version in your js-meta.xml needs to match your org's current API version. Find yours in Salesforce Setup → Apex Classes — the version shown there is what to use. Ask Claude Code to update your meta.xml with the right version.

VS Code + Salesforce +
Claude in 45 minutes

You're set up. Now go build something.

VS Code + Salesforce +Claude in 45 minutes

You're set up. Now go build something.

VS Code + Salesforce +
Claude in 45 minutes