====== Visual Studio Code Setup Guide ======

Simple, screenshot-driven steps to get VS Code set up. This guide is written for Windows and uses short steps, clear menu paths, and annotated images.

<WRAP round info>
===== How to use this guide =====


  *  Menu paths are written like: <wrap round box>File >> New Window with Profile >> New Profile...</wrap>
  * Keyboard keys use + signs: <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd>
  * Screenshots live in the '':vscode:'' namespace and include red arrows and labels
  * Each step includes 1–2 images with captions. Replace the placeholders with your screenshots.
</WRAP>
----

===== 1) Create a new VS Code profile =====

<WRAP round help> 
Why profiles? Profiles let you keep separate extensions, settings, and UI layout for different tasks (e.g., Python vs. Web). They’re easy to switch without changing your default setup.
</WRAP>

==== Steps ====

  - In VS Code, go to: <wrap round box>File >> New Window with Profile >> New Profile...</wrap>
  - Choose ''Create a new profile''
  - Give it a name (e.g., "Web Dev" or "Python Data")
  - Select ''copy from None'' for an Empty profile with default settings
  - Click ''Create'' and wait for the new window to open with that profile

==== Screenshots ====

<WRAP centeralign>
Image A — Open the profile menu\\
{{ :vscode:step1-profile-menu.png?nolink |Open Profile Menu }}

Image B — Create new profile dialog\\
{{ :vscode:step1-create-profile-dialog.png?nolink |Create New Profile }}
</WRAP>

----

===== 2) Turn on Settings Sync with GitHub =====

Sync keeps your settings, keybindings, extensions, UI state, and snippets consistent across devices.

==== Steps ====

  - Go to: <wrap round box>Manage (gear icon, bottom-left) >> Turn on Settings Sync...</wrap>
  * Or press: <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> and run: ''Settings Sync: Turn On''
  - Click ''Sign in & Turn on'' and choose GitHub when prompted
  - Your browser opens to GitHub — authorize VS Code, then return to VS Code
  - Pick what to sync (Settings, Keybindings, Extensions, UI State, Snippets) and confirm
  - Verify the Accounts menu shows: Settings Sync is on

==== Screenshots ====

Image A — Turn on Settings Sync

<WRAP centeralign>
{{ :vscode:step2-turn-on-sync-menu.png?nolink |Turn on Settings Sync }}
</WRAP>

<WRAP round tip>
  * If you use multiple profiles, turn Sync on in the profile you want as your baseline.
  * You can limit what gets synced (e.g., extensions only) in the turn-on dialog.
  * [[https://code.visualstudio.com/docs/editor/settings-sync|Docs: Settings Sync]]
</WRAP>
----

===== 3) Install and sign in to GitHub Copilot =====

Copilot suggests code in real time. Requires a GitHub account and an active Copilot subscription (free for some users like students/teachers; see GitHub’s terms).

==== Steps ====

  - Open Extensions: <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>X</kbd>, search: ''GitHub Copilot'' (publisher: GitHub), then Install
  - After install, click ''Sign in to GitHub'' if prompted; complete the browser auth flow and return to VS Code
  - Confirm Copilot is enabled (status icon appears in the status bar)
  - Test: open a code file and start typing a comment; accept a suggestion with <kbd>Tab</kbd>

==== Screenshots ====

<WRAP centeralign>
Image A — Install GitHub Copilot extension\\
{{ :vscode:step3-copilot-extension.png?nolink |Install GitHub Copilot }}
</WRAP>

<WRAP round tip>
  * If you don’t see suggestions, ensure: <wrap round box>View >> Extensions >> GitHub Copilot</wrap> is Enabled.
  * You can toggle Copilot per-language in the extension settings.
  * [[https://code.visualstudio.com/docs/copilot/overview|Docs: GitHub Copilot]]
</WRAP>
----

===== 4) Explore Welcome and Walkthroughs =====

VS Code’s Welcome page includes built-in walkthroughs, like "Get started with VS Code", guiding you through core features. Extensions can also contribute their own walkthroughs (for example: Python, Docker, GitHub Copilot), which show up alongside the built-in ones.

==== Steps ====

  - Open the Welcome page: <wrap round box>Help >> Get Started</wrap>
  * Or press: <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> and run: ''Welcome: Open Welcome Page''
  - Click ''Get started with VS Code'' and complete the mini-tasks (Open Folder, Run and Debug, Source Control, Terminal, etc.)
  - Optional: Keep showing the Welcome page at startup — <wrap round box>Settings (<kbd>Ctrl</kbd> + <kbd>,</kbd>) >> Workbench >> Startup Editor</wrap> = ''welcomePage''

==== Screenshots ====

<WRAP centeralign>
Image A — Welcome (Get Started) page\\
{{ :vscode:step4-welcome-home.png?nolink |Welcome Page }}
</WRAP>

<WRAP round tip>
  * Extensions add their own walkthroughs; after installing an extension, check Welcome. Tip: you can also open a specific one directly via <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> > ''Welcome: Open Walkthrough...''
  * [[https://code.visualstudio.com/docs/getstarted/getting-started|Docs: Getting Started]]
</WRAP>