Home

Get Started with VS Code

You want to write code, but Notepad or TextEdit feels limiting. You need something that helps you code faster - with syntax highlighting, autocomplete, and built-in tools. VS Code is like a smart notebook for code - it understands what you’re writing and helps you along the way. Visual Studio Code is free, runs on any OS, and is used by millions of developers.

Key Concepts

• Editor - The main area where you write code
• Explorer - The sidebar that shows your files and folders
• Extensions - Add-ons that give VS Code new features
• Integrated Terminal - A command line built into VS Code

What You’ll Need

• Windows, macOS, or Linux computer
• Internet connection
• ~500 MB disk space
• 20-25 minutes

Step 1: Download and Install VS Code

• Go to code.visualstudio.com
• Click the Download button (it detects your OS)
• Run the installer:
  • Windows: Double-click the .exe and click Next through the prompts. On the Select Additional Tasks screen, also tick Add “Open with Code” action to Windows Explorer directory context menu so you can open project folders from File Explorer later
  • Mac: Open the .dmg, drag VS Code to Applications
  • Linux: Follow instructions for your package manager
• Launch VS Code

You’ll see a Welcome tab with getting started options.

Step 2: Tour the Interface

VS Code has five main areas:

• Activity Bar (left edge) - Icons for Explorer, Search, Git, Extensions, etc.
• Side Bar - Shows content for selected activity (files, search results)
• Editor (center) - Where you write code
• Panel (bottom) - Terminal, Problems, Output
• Status Bar (bottom edge) - Info about your file and project

Click the Explorer icon (top of Activity Bar) to see the file browser.

Step 3: Open a Folder and Explore

• Click File → Open Folder
• Go to your Documents folder and create a new empty folder for practice, such as vscode_practice (use the New Folder button in the window)
• Select that new folder, then click Open (or Select Folder)
• If prompted “Do you trust the authors?”, click Yes, I trust the authors

The Explorer sidebar now shows your folder’s files:

• Click on a folder to expand it
• Click on any file to open it in the editor
• Click the Search icon in the Activity Bar (magnifying glass) to search across all files

Step 4: Create a Markdown File

• In Explorer, move your mouse over the folder name at the top, then click the New File icon (page with +) that appears
• Name it README.md
• Add this content:

# My Project

This is a **demo project** for learning VS Code.

## Features
- Easy to edit
- Markdown formatting
- Live preview

## Next Steps
1. Add more content
2. Try other file types
3. Explore extensions

• Click File → Save to save

Markdown is a simple text format that uses symbols like # for headings, ** for bold, and - for lists. It’s widely used for documentation and communicating with LLMs like ChatGPT and Claude.

Step 5: Install Markdown Preview Extension

• Click the Extensions icon in Activity Bar (the squares icon)
• Type Markdown Preview Enhanced in the search box
• Find Markdown Preview Enhanced in the results
• Click Install

Step 6: Preview Your Markdown File

• Open README.md if not already open
• Right-click in the editor and select Markdown Preview Enhanced: Open Preview to the Side

A preview panel opens showing your formatted Markdown - edit on the left, see changes on the right in real-time!

Step 7: Use the Integrated Terminal

• Click Terminal → New Terminal
• Try these commands:

List files:

ls

(On Windows Command Prompt, use dir)

Print working directory:

pwd

(On Windows Command Prompt, use cd)

Create a new folder:

mkdir notes

Check Explorer - the notes folder appears! The terminal runs in your project folder, so commands affect your project directly.

Step 8: Use AI Agents in VS Code (Optional)

VS Code includes GitHub Copilot Chat, an AI assistant that can explain, write, and debug code.

• Open the README.md file (or any other file in your project)
• Click Chat → Open Chat in the title bar (or press Ctrl+Alt+I on Windows/Linux, Ctrl+Cmd+I on Mac)
• If prompted, sign in with your GitHub account (a free plan is available)
• In the chat panel that opens, type: “Explain this file”
• Press Enter

GitHub Copilot will analyze your file and explain what it does. You can ask it to write new code, fix bugs, or answer questions like “How do I add more features?”

Tip: For inline editing, highlight code in any file and press Ctrl+I (Windows/Linux) or Cmd+I (Mac) to ask Copilot to modify, fix, or explain just that section.

How to Reopen Your Project

• Open VS Code from Start menu (Windows), Spotlight (Mac), or Applications (Linux)
• Click File → Open Recent → select your folder
• Or click File → Open Folder and navigate to it

Troubleshooting

• Preview not showing: Make sure Markdown Preview Enhanced extension is installed and you have a .md file open
• Terminal shows wrong directory: Click the trash icon in terminal panel, then click Terminal → New Terminal
• Chat menu not visible: AI features may be turned off. Open Settings (press Ctrl+, on Windows/Linux or Cmd+, on Mac), search for disable AI features, and untick it. Then hover over the Copilot icon in the Status Bar (bottom) and select Use AI Features
• Extensions not working: Click View → Command Palette, type “reload window”, and select Developer: Reload Window

The Complete Workflow

1. Open folder in VS Code
2. Create/edit files
3. Use extensions to preview
4. Use terminal for commands
5. Use AI to understand and improve code
6. Save and repeat

Next Steps

• Try other file types: Create .html, .css, .js, or .py files and see VS Code’s syntax highlighting
• Explore AI features: Ask AI to write code, fix bugs, or suggest improvements to your projects
• Install more extensions: Try “Prettier” for auto-formatting or “GitLens” for Git features
• Learn shortcuts: Click Help → Keyboard Shortcuts Reference to speed up your workflow

Created by Steven Ge on December 7, 2025.