Developer Tools

Visual Studio Code

VS Code is the most widely used code editor in the world. Free, fast, and endlessly extensible — knowing it well saves hours every week. Choose your level to get started.

Learning mode:

Installing VS Code

Download VS Code from code.visualstudio.com — it's free and available for Windows, Mac, and Linux. During installation on Windows, check "Add to PATH" so you can open files from the terminal with code .

Open a project:File → Open Folder, then select your project directory. VS Code treats the folder as a workspace and shows all your files in the sidebar.

The Interface

VS Code has five main areas: the Activity Bar (far left icons for Explorer, Search, Git, Extensions), the Sidebar (file tree or panel for whichever activity is active), the Editor (where you write code), the Terminal (bottom panel, Ctrl+` to open), and the Status Bar (bottom strip showing language, line, branch).

Essential Shortcuts

Ctrl + P

Quick file open — type any filename to jump to it instantly. The single most useful shortcut.

Ctrl + `

Open/close the integrated terminal without leaving VS Code.

Ctrl + /

Toggle line comment for the current line (or selected lines).

Alt + Up/Down

Move the current line up or down without cut/paste.

Ctrl + D

Select the next occurrence of the current word. Keep pressing to select more. Then type to replace all.

Ctrl + Shift + P

Command Palette — search for any VS Code command by name. The escape hatch for everything.

Ctrl + B

Toggle the sidebar. Hide it when you need more editor space.

Ctrl + Z / Y

Undo / Redo. Works across multiple sessions with VS Code's edit history.

Must-Have Extensions for Beginners

Prettier

esbenp.prettier-vscode

Automatically formats your HTML, CSS, JS, and JSON on save. Set "format on save" to true and forget about formatting forever.

Live Server

ritwickdey.liveserver

Right-click any HTML file → "Open with Live Server". Automatically reloads your browser on every save.

Auto Rename Tag

formulahendry.auto-rename-tag

When you rename an HTML opening tag, the closing tag updates automatically.

GitLens

eamodio.gitlens

Shows who last changed each line of code (inline blame), plus a rich Git history panel.

Multi-Cursor Editing

Multi-cursor lets you type in multiple places simultaneously — one of VS Code's most powerful productivity features.

Alt + Click

Add a cursor at any position you click. Type once, edit everywhere.

Ctrl + Alt + Down

Add a cursor on the line below your current cursor. Keep pressing to extend.

Ctrl + Shift + L

Select all occurrences of the current word across the file. Type to replace all at once.

Ctrl + G

Go to a specific line number — type the number and press Enter.

Emmet — Write HTML Faster

Emmet is built into VS Code. Type an abbreviation and press Tab to expand it into full HTML.

Emmet — Abbreviations

! → Full HTML boilerplate div.container → <div class="container"></div> ul>li*5 → <ul> with 5 <li> items nav>ul>li*3>a → Full nav structure div#hero.section-hero → <div id="hero" class="section-hero"> p{Hello World} → <p>Hello World</p> input[type=email] → <input type="email">

Snippets

Create your own code snippets to expand into boilerplate. Go to File → Preferences → Configure User Snippets → select a language.

JSON — Custom snippet (javascript.json)

{ "Fetch JSON": { "prefix": "fetchjson", "body": [ "const res = await fetch('$1');", "if (!res.ok) throw new Error('HTTP ' + res.status);", "const data = await res.json();", "$0" ], "description": "Fetch and parse JSON with error handling" } }

Debugging

VS Code has a built-in debugger. You don't need console.log everywhere — set a breakpoint by clicking the gutter (left of line numbers) and press F5 to start debugging.

Start debugging (or continue if already paused at a breakpoint).

F10

Step over — execute the current line and move to the next.

F11

Step into — jump into the function call on the current line.

Shift + F5

Stop the debugger session.

settings.json

Open with Ctrl+Shift+P → Open User Settings (JSON). Set every preference directly in JSON — more precise than the GUI.

JSON — settings.json (web dev)

{ "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.tabSize": 2, "editor.wordWrap": "on", "editor.fontSize": 14, "editor.lineHeight": 1.7, "editor.minimap.enabled": false, "editor.bracketPairColorization.enabled": true, "editor.inlineSuggest.enabled": true, "files.autoSave": "onFocusChange", "terminal.integrated.defaultProfile.windows": "PowerShell", "prettier.singleQuote": true, "prettier.semi": true, "emmet.includeLanguages": { "javascript": "html" } }

Workspace Settings and Tasks

Save a .vscode/settings.json in your project for team-shared settings. Add a .vscode/tasks.json to define custom build tasks runnable with Ctrl+Shift+B.

JSON — .vscode/tasks.json

{ "version": "2.0.0", "tasks": [ { "label": "Start Dev Server", "type": "npm", "script": "dev", "group": { "kind": "build", "isDefault": true }, "presentation": { "reveal": "always", "panel": "new" } } ] }

Extensions for Advanced Workflow

ESLint

dbaeumer.vscode-eslint

Real-time JavaScript/TypeScript linting. Underlines problems as you type. Essential for team projects.

REST Client

humao.rest-client

Send HTTP requests from .http files directly in VS Code. Better than switching to Postman for quick API tests.

Path Intellisense

christian-kohler.path-intellisense

Autocompletes file paths as you type import statements.

Error Lens

usernamehw.errorlens

Shows error and warning messages inline on the same line as the problem — no hovering needed.

Remote Development

The Remote - SSH extension lets you open a folder on a remote server and edit it as if it were local. VS Code handles file sync, terminal sessions, and even extension support over the SSH connection. Pair with code tunnel (GitHub CLI) to access your machine from anywhere without a public IP.