Exercise: Navigate VS Code Like a Pro

Objective

Get comfortable with the core areas of VS Code so you can move quickly during the @Solar modules.

---

Tasks

1. Open the Command Palette

• Press ⌘ Shift P (macOS) or Ctrl Shift P (Windows/Linux)
• Type theme and change your color theme to something you like
• Open the Command Palette again and type font size — adjust it if needed

✅ Success: You changed your theme without touching any menu.

2. Use Quick Open

• Press ⌘ P (macOS) or Ctrl P (Windows/Linux)
• Type page and select a file from the results
• Try typing layout and open layout.tsx

✅ Success: You jumped to a file by name in under 3 seconds.

3. Split the Editor

• Open any two files (use Quick Open)
• Press ⌘ \ (macOS) or Ctrl \ to split the editor
• Drag a tab from one side to the other

✅ Success: You can see two files side by side.

4. Use the Integrated Terminal

• Press Ctrl ` or ⌘ J to toggle the terminal panel
• Type ls (macOS/Linux) or dir (Windows) to list your project files
• Click the + icon to create a second terminal
• Click the trash icon to close a terminal

✅ Success: You opened, used, and closed terminals without leaving VS Code.

5. Explore Extensions

• Press ⌘ Shift X to open the Extensions panel
• Search for GitHub Copilot — is it installed?
• Search for Solar — is the Solar DS extension installed?
• Browse the "Recommended" section

✅ Success: You can find and identify installed extensions.

6. Find Something in the Project

• Press ⌘ Shift F to open the global search
• Search for Solar — how many files mention it?
• Click a result to jump to that line in the file

✅ Success: You searched across the entire project and navigated to a result.

---

Deliverables

• Changed the color theme via Command Palette
• Opened a file via Quick Open (⌘ P)
• Viewed two files side by side
• Used the integrated terminal
• Found and verified your extensions
• Searched across the project with ⌘ Shift F

Bonus

• Try Zen Mode (⌘ K Z) for distraction-free editing — press Escape Escape to exit
• Try the Minimap — it's the tiny code overview on the right side of the editor. Right-click it to toggle it on/off