Module 4 : Setting Up Development Environment (vs Code + Live Server)
Part 1 — Introduction
What is VS Code and why use it? (lightweight, extension ecosystem, cross-platform)
What is Live Server and what problem does it solve? (automatic browser reload on save; quick local dev server)
Part 2 — Install & Setup
Walk through installing VS Code (Windows/macOS/Linux)
Install recommended extensions: Live Server, Prettier, ESLint, GitLens, Auto Rename Tag, IntelliSense where relevant
Show how to enable Settings Sync and choose a theme
Part 3 — Demo: Create First Project
Create folder, index.html, styles.css, script.js
Start Live Server and demonstrate live reload
Show workspace .vscode/settings.json (format on save, default formatter)
Part 4 — Dive: Live Server Settings & Troubleshooting
liveServer.settings.port and liveServer.settings.root
Demo changing the root to serve a subfolder
Common issues (Go Live missing, port conflict, open-file vs open-folder)
exercises, discuss grading rubric, provide resources for further research
1) Installing VS Code (short demo)
Windows (demo):
Visit the official VS Code download page and download the Windows User Installer.
Run the downloaded VSCodeUserSetup-<version>.exe and follow the installer prompts.
During install, recommend enabling: "Add to PATH" (optional) and "Open with Code" context menus.
macOS (demo):
Download the macOS .zip from the official page.
Extract and move Visual Studio Code.app to /Applications.
Optionally run Shell Command: Install 'code' command in PATH from the Command Palette (Cmd+Shift+P).
Linux (.deb / .rpm) (demo):
Download the .deb or .rpm package for your distro.
Install with package manager (sudo apt install ./<file>.deb or sudo rpm -i <file>.rpm).
tip: show the VS Code Getting Started page and point to platform-specific setup during the demo.
2) First-time
Open VS Code and enable Settings Sync (turns on sync for settings, extensions, keybindings
Install these recommended extensions during demo: Live Server, Prettier - Code formatter, ESLint, GitLens — Git supercharged, Auto Rename Tag.
Set common preferences (User Settings):
editor.formatOnSave: true
files.autoSave: "off" (or afterDelay depending on instructor preference)
Show how to open Settings UI and how to edit settings.json directly.
3) Install Live Server
Open Extensions view (Ctrl+Shift+X / Cmd+Shift+X).
Search for Live Server (by Ritwick Dey) and click Install.
After installation, open an index.html file and click Go Live in the status bar (bottom-right). The project will open at http://127.0.0.1:5500/ by default.
demo: edit index.html, save, and show the browser auto-refresh.
4) structure
Project tree:
my-first-website/
├─ index.html
├─ css/
│ └─ styles.css
├─ js/
│ └─ script.js
└─ .vscode/
└─ settings.json
index.html (minimal example):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Live Server Demo</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<h1 id="title">Hello, Live Server!</h1>
<button id="change">Change Text</button>
<script src="js/script.js"></script>
</body>
</html>
css/styles.css
body { font-family: system-ui, sans-serif; padding: 2rem; }
h1 { color: #2b6cb0; }
js/script.js
const btn = document.getElementById('change');
const h1 = document.getElementById('title');
btn.addEventListener('click', () => {
h1.textContent = 'Text changed — Live!';
});
Start Live Server (Go Live) and show that editing styles.css or index.html and saving triggers an automatic page reload.
5) Useful Live Server settings
Demonstrate adding these to .vscode/settings.json to ensure everyone on the team has the same dev-server behavior:
{
"liveServer.settings.port": 5500,
"liveServer.settings.root": "/",
"liveServer.settings.open": true,
"editor.formatOnSave": true
}
Explain each setting briefly:
liveServer.settings.port: port for the local server (default 5500). Useful if you need a fixed port or must change due to conflict.
liveServer.settings.root: choose a subfolder as the server root (useful for multi-project repos).
liveServer.settings.open: whether browser opens automatically.
tip: show how to edit these via the Settings UI (Extensions → Live Server → Configuration → Edit in settings.json).
6) Workflow
Open a folder, not a single file. Live Server uses the workspace root; opening a file outside a folder may prevent Go Live from appearing.
Use .vscode/settings.json for team defaults (port, root, format on save).
Combine Live Server with Prettier + ESLint to keep code clean while previewing quickly.
For larger projects (React, Vue, Angular), prefer their framework dev servers (npm start, vite, ng serve) instead of Live Server.
Exercise 1
Create a one-page site and use Live Server to preview changes live.
Create the project structure shown above.
Add the example index.html, styles.css, and script.js.
Start Live Server and demonstrate live reload by changing the H1 text and CSS color.
Deliverable: A working project with live reload.
criteria: Server starts, browser opens, changes reflecting on save.
Exercise 2 — Multi-page site & changing root
Build a multi-page demo, place pages under /website and configure Live Server to serve /website as root.
Create website/ folder with index.html, about.html and assets subfolders.
Add .vscode/settings.json with "liveServer.settings.root": "/website".
Start Live Server and verify that http://127.0.0.1:5500/ shows content from /website.
Deliverable: Multi-page site accessible via Live Server root.
Site served from correct root and navigation works.
Exercise 3 — Integrate SCSS & live-compile
Show how Live Server can preview compiled CSS while using a live Sass compiler extension.
Install Live Sass Compiler extension.
Create scss/styles.scss, compile to css/styles.css on save.
Start Live Server; edit scss/styles.scss and ensure changes are compiled and the browser reloads.
Deliverable: SCSS workflow with live compile + live reload.
Assessment: SCSS edits result in updated CSS and browser reload.
Exercise 4
Teams solve 3 common issues Scenarios:
Go Live button missing (solution: open folder, reinstall extension, check extension disabled)
Port conflict (solution: change liveServer.settings.port or kill process)
Browser caching prevents CSS update (solution: hard reload / disable cache in devtools)
Deliverable: Short describing the problem, steps taken, and final resolution.
Assessment: Correct diagnosis and reproducible fix steps.
Q: "Go Live" button doesn't appear.
Make sure you opened a folder/workspace (File → Open Folder). Live Server uses the workspace root. If only a single file is open, the status bar button might not appear.
Check Extensions view to verify Live Server is installed and enabled.
Q: Page doesn't reload on save.
Confirm you saved the file. If using autoSave, make sure the editor writes file changes to disk.
Check console for errors in the extension host.
Q: Port 5500 is already in use.
Edit .vscode/settings.json to change liveServer.settings.port to another available port (e.g., 5501) or set to 0 to pick a random free port.
Q: Browser fails CORS or API calls.
Live Server is a static file server. For backend API calls, run a proper backend server with CORS configured or use a proxy.
Q: I want to open Live Server on a specific browser (not default).
You can configure the liveServer.settings.CustomBrowser option in settings to point to a browser executable.
Setting Up Development Environment (VS Code + Live Server)”.
VS Code — download & platform installers (official).
VS Code — setup overview and recommended additional components (Git, Node.js, extensions).
Live Server — official extension page / install instructions (Ritwick Dey).
Live Server — detailed settings docs (port, root, etc.).
VS Code — extensions & marketplace docs (how to find/install/manage extensions).
No comments:
Post a Comment