Verification Checklist
Run through every check on this list before moving on. If any item fails, fix it now — do not proceed to the next section with a broken VS Code setup.
Before you move on to the next section, confirm that every item on this checklist passes. A broken VS Code setup causes confusing errors later that are difficult to trace back to their source. Five minutes here saves hours later.
Work through the checks in order. Each one builds on the previous.
Check 1 — VS Code Opens and Shows the Correct Version
Open VS Code (from the taskbar, Start menu, or desktop shortcut)
Go to Help → About in the top menu bar
A dialog appears showing the VS Code version number.
Confirm the version is 1.85 or newer
Any version from 2024 onward satisfies this. If your version is older, VS Code usually prompts you to update — accept the update and restart.
Pass condition: VS Code opens and the version is 1.85+.
1.85 or higher, this check passes. If the About dialog shows an older version, VS Code should have already prompted you to update — click Restart to Update if that prompt is visible.Check 2 — The code Command Works in the Terminal
The code command lets you open VS Code from any terminal. This is how you will open every project.
Press Ctrl+` to open the VS Code integrated terminal
Type the following and press Enter:
Expected output: Three lines similar to: The first line is the version number. The second is a commit hash. The third is your processor architecture.
Pass condition: The command outputs a version number without any error.
1.9x.x), a long commit hash, and x64. All three lines must appear for this check to pass.If it fails: The PATH was not set during installation. Fix it: press Ctrl+Shift+P, type "Shell Command: Install 'code' command in PATH", press Enter, then restart VS Code and try again.
Check 3 — All 8 Extensions Are Installed
Press Ctrl+Shift+X to open the Extensions Sidebar
In the search box, type @installed
This filters the list to show only installed extensions.
Confirm all 8 of these extensions are in the list:
| Extension name | Publisher |
|---|---|
| Claude Code | Anthropic |
| GitLens — Git supercharged | GitKraken |
| Tailwind CSS IntelliSense | Tailwind Labs |
| Prettier - Code formatter | Prettier |
| ESLint | Microsoft |
| ES7+ React/Redux/React-Native snippets | dsznajder |
| Auto Rename Tag | formulahendry |
| Path Intellisense | Christian Kohler |
Pass condition: All 8 are listed under @installed.
If any are missing: Return to the Extensions page and install them.
Check 4 — Claude Code Is Signed In
Click the Claude Code icon in the Activity Bar (the Anthropic "A" logo on the left strip)
The Claude Code panel opens in the Sidebar. Confirm it shows a chat input box, not a sign-in prompt.
If you see "Sign in to continue" or similar, click it and complete sign-in with your Anthropic account.
Type a test message in the chat box:
Press Enter. Wait for the response.
Pass condition: Claude responds with "4" or similar. The extension is connected and working.
Check 5 — Git Bash Is the Default Terminal
Close any open terminal panels (click the trash/bin icon in the terminal panel header)
Press Ctrl+` to open a fresh terminal
Look at the prompt in the new terminal.
Git Bash prompt looks like: Bittu@MACHINE MINGW64 ~ $ — there is a $ sign and the text mentions MINGW64 or shows a green-coloured path.
PowerShell prompt looks like: PS C:\Users\Bittu> — the prompt starts with PS.
Command Prompt looks like: C:\Users\Bittu> — no PS, just a directory path.
Pass condition: The terminal shows a Git Bash prompt (ending in $).
$. If you see PS C:\ (PowerShell) or C:\ (Command Prompt), return to the Settings page, set Git Bash as the default terminal profile, then close the current terminal and open a new one.If it shows PowerShell or Command Prompt: Go back to the Settings page and configure "terminal.integrated.defaultProfile.windows": "Git Bash". Close and reopen the terminal.
Check 6 — Node.js Is Accessible From the Terminal
In the VS Code terminal (which should now be Git Bash from Check 5), type:
Press Enter.
Expected output: A version number starting with v, such as:
Pass condition: A version number appears, starting with v20 or higher.
v20.x.x or higher. If the version starts with v18 or v16, Node.js is outdated — uninstall it and reinstall the LTS version from nodejs.org.If the command is not found: Node.js is not installed, or was installed after VS Code was opened. Complete the Node.js installation section, then close and reopen VS Code entirely (not just the terminal).
"Not found" errors in the terminal are almost always one of two things: The tool is not installed, or VS Code was open when the tool was installed and has not picked up the updated PATH. The fix for the second case is always the same: close VS Code completely (not just the terminal panel) and reopen it.
Check 7 — npm Is Accessible From the Terminal
In the terminal, type:
Press Enter.
Expected output: A version number such as 10.2.4 or similar. npm comes bundled with Node.js, so if Node.js is installed correctly, npm is too.
Pass condition: A version number appears (any number — the exact version does not matter here).
node --version worked in Check 6 but npm --version fails here, the Node.js installation is incomplete — reinstall it.Check 8 — Prettier Formats on Save
This test confirms that Prettier is installed, set as the default formatter, and triggered on save.
In VS Code, create a new file: press Ctrl+N (new untitled file)
Press Ctrl+Shift+P, type "Change Language Mode", press Enter. In the dropdown, type JavaScript and select JavaScript.
This tells VS Code to treat this unsaved file as a JavaScript file so Prettier knows how to format it.
Type the following into the file — deliberately messy, with inconsistent spacing:
Press Ctrl+S to save (save anywhere, any filename).
Expected result: The code reformats itself to:
The spacing around = is fixed. The long single line breaks into multiple lines. Indentation is consistent.
Pass condition: Code formats automatically on save.
If nothing changes on save: Prettier may not be set as the default formatter. Press Ctrl+Shift+P, type "Format Document With", press Enter, and select Prettier. Then try saving again. Also confirm "editor.formatOnSave": true is in your settings.json.
Check 9 — ESLint Is Running
Look at the Status Bar at the very bottom of VS Code
Find the ESLint icon — it looks like a small circle with letters inside. If you cannot find it, it may be hidden at the very bottom left.
Confirm it shows a green circle with a tick or no error icon
A green circle means ESLint is running and has no configuration problems.
A yellow or red circle means ESLint has an issue — hover over it to see the message.
Pass condition: ESLint icon shows green.
Note: ESLint only activates fully when you have a project open with an ESLint configuration file (.eslintrc or eslint.config.js). On a blank workspace it may show neutral. This check is confirmed more thoroughly once you open your first real project.
Check 10 — Open a Folder and Confirm the Interface
This is a final end-to-end test of your setup.
Create a new empty folder on your Desktop called vscode-test
In VS Code, go to File → Open Folder and select the vscode-test folder
Alternatively: navigate to the folder in Windows Explorer, right-click the folder, and select "Open with Code" (which you enabled during installation).
In the Explorer Sidebar, you should see VSCODE-TEST at the top — an empty project.
Right-click inside the Explorer area and select "New File". Name it test.tsx.
In the new file, type rafce on the first line and press Tab.
The ES7+ React snippets extension should expand this into a full React component skeleton.
Press Ctrl+` to open the terminal.
Confirm it opens in Git Bash inside the vscode-test folder. The prompt should show the folder path.
Type pwd in the terminal and press Enter.
This prints the current directory. Confirm it is the path to your vscode-test folder.
Pass condition: All 6 steps complete without errors. The rafce snippet expands, the terminal opens in the right folder.
rafce and press Tab, you should see a full React component skeleton appear with the function name highlighted. If Tab does nothing, the ES7+ React Snippets extension is not installed — return to the Extensions page.Summary: What a Passing Setup Looks Like
| Check | What you confirmed |
|---|---|
| 1 | VS Code 1.85+ installed and opens |
| 2 | code --version works in the terminal |
| 3 | All 8 extensions listed under @installed |
| 4 | Claude Code signed in and responding |
| 5 | Terminal opens as Git Bash |
| 6 | node --version returns v20+ |
| 7 | npm --version returns a version number |
| 8 | Prettier formats code on Ctrl+S |
| 9 | ESLint icon is green in the Status Bar |
| 10 | Folder opens, rafce snippet works, terminal in correct folder |
If every check passes, your VS Code setup is complete. You have the correct version, all 8 extensions, the right shell, Node.js, Prettier formatting, and a working Claude Code connection.
Keep this checklist. You will set up VS Code on new machines over time — new laptops, fresh reinstalls, borrowed machines. Running this 10-step checklist on any new installation gives you confidence that everything is working before you start writing code.
You Are Ready
With VS Code configured, you have the environment that all professional web development in this workshop happens inside. Every session, every project, every debug session and deploy happens here.
The next section covers Git and GitHub — how your code is tracked, backed up, and shared. VS Code's Source Control panel (which you have now seen in the interface tour) is how you will do most of that without typing Git commands manually.