NEW: Claude Code Security — research preview →

Quickstart

Hands-on tutorial: build a task manager app with all Copilot features

Read time: 6 min

title: "Quickstart" description: "Hands-on tutorial: build a task manager app with all Copilot features" section: "Copilot" readTime: "6 min"

Quickstart: GitHub Copilot in VS Code

Build a complete task manager web app while learning VS Code's AI features.

Prerequisites

  • VS Code installed
  • GitHub Copilot access (free plan works) — follow Setup

Step 1 — Inline Suggestions

  1. Create a new folder and open it in VS Code
  2. Create index.html
  3. Start typing <!DOCTYPE html> — ghost text appears with HTML structure
  4. Press Tab to accept the suggestion
  5. Use Alt+] / Alt+[ to cycle through alternative suggestions
  6. Accept partial suggestions with Ctrl+Right (word by word)

Tip: Inline suggestions work best when you have related files open for context.

Step 2 — Build Features with Agents

  1. Open Chat view (Ctrl+Alt+I)
  2. Select Agent from the agent dropdown
  3. Enter a prompt:
Create a complete task manager web app with add, delete, and mark-complete.
Include modern CSS. Separate HTML, CSS, and JS into their own files.
  1. Watch the agent create files, install dependencies, run commands
  2. Select Keep to accept all changes
  3. Add a follow-up: "Add filter buttons for all/completed/pending tasks"

Step 3 — Inline Chat for Precise Edits

  1. Open your JS file, select the task-adding function
  2. Press Ctrl+I to open editor inline chat
  3. Enter: "Add input validation to prevent empty tasks; trim whitespace"
  4. Review the targeted change → select Keep

Use inline chat for: small focused changes, adding error handling, refactoring single functions.

Step 4 — Custom Instructions

  1. Create .github/copilot-instructions.md in your project root
  2. Add your coding standards:
## Code Style
- Use semantic HTML5 elements
- Prefer ES6+ (const/let, arrow functions, template literals)
 
## Naming
- PascalCase for components, camelCase for functions/variables
  1. All future chat interactions in this project follow these rules automatically
  2. Use /init in chat to auto-generate instructions from your existing code

Step 5 — Smart Actions

  1. Open Source Control view (Ctrl+Shift+G)
  2. Stage your changes
  3. Click the sparkle icon to generate a commit message
  4. The AI analyzes staged changes and writes a conventional commit message

Next Steps