VS Code Setup for Beginners

VS Code is free, runs everywhere and is what most people use. The default setup is fine — a few small changes make it noticeably better.

Resist installing thirty extensions. Five is plenty.

Extensions worth having#

• Python (Microsoft) — if you write Python. Adds running, debugging and IntelliSense.
• Prettier — formats HTML, CSS and JavaScript on save. Ends every argument about spacing.
• ESLint — flags likely JavaScript bugs as you type.
• Live Server — right-click an HTML file, open it in a browser, and it refreshes on every save.
• Error Lens — shows the error next to the line instead of hiding it in a panel. Genuinely useful when you are learning.

Skip icon packs and themes until everything else works. They are fun and they are not why your code will not run.

Settings to change#

Open settings with Ctrl + , (Cmd + , on Mac) and search for each:

• Format On Save → on. Your code tidies itself every time you save.
• Tab Size → 4 for Python, 2 for web files.
• Insert Spaces → on. This prevents Python’s TabError permanently.
• Word Wrap → on. No more horizontal scrolling to read a long line.
• Auto Save → onFocusChange, if you keep forgetting to save.
• Files: Trim Trailing Whitespace → on. Keeps diffs clean later.

Or paste this into the JSON settings file (Ctrl+Shift+P → “Preferences: Open User Settings (JSON)”):

{
  "editor.formatOnSave": true,
  "editor.tabSize": 4,
  "editor.insertSpaces": true,
  "editor.wordWrap": "on",
  "files.trimTrailingWhitespace": true,
  "files.autoSave": "onFocusChange",
  "[javascript]": { "editor.tabSize": 2 },
  "[html]": { "editor.tabSize": 2 },
  "[css]": { "editor.tabSize": 2 }
}

Shortcuts worth memorising#

On Mac, swap Ctrl for Cmd.

Working in folders, not files#

Always open a folder (File → Open Folder), not a single file. Extensions, the terminal and the debugger all work relative to the open folder. Opening a lone file is behind a surprising number of “it does not work” problems.

Running your code#

Python: open the file and press the play button, or use the terminal:

python app.py

Web: right-click your HTML file and choose “Open with Live Server”. Opening the file directly with a file:// path works for simple pages but blocks fetch requests, which causes confusing errors later.

The integrated terminal#

Press Ctrl + ` to open a terminal already in your project folder. Learning a few commands here saves a lot of clicking:

ls          # list files (dir on Windows cmd)
cd folder   # go into a folder
cd ..       # go up one level
python app.py
git status

Where to go next#

• Git and GitHub explained
• Browser DevTools for beginners
• VS Code problems beginners hit — when the editor is the problem