> ## Documentation Index
> Fetch the complete documentation index at: https://fastapi2day.codewithsiva.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Using Git Visually in VS Code's Source Control Panel

> Stage, commit, push, and pull your code using VS Code's built-in Source Control panel — no terminal commands required for everyday Git tasks.

VS Code ships with Git support built right in, so you never have to open a terminal to manage your version control. The Source Control panel gives you a visual overview of every changed file, lets you stage and commit with a couple of clicks, and keeps your local copy in sync with GitHub through a single button. If you prefer typing commands that's always available too — but the visual interface is hard to beat for everyday work.

## The Source Control panel

Open the Source Control panel from the left sidebar — it's the icon that looks like a branching diagram. You can also press `Ctrl + Shift + G` (Windows/Linux) or `Cmd + Shift + G` (macOS).

Inside the panel you'll see:

* **Changes** — every file you've modified since the last commit
* A message box at the top for your commit message
* A checkmark button to commit staged files

Click any file in the list to open a side-by-side diff showing exactly what changed.

## Basic workflow

### 1. See your changes

When you edit files, they appear automatically under **Changes**. Green highlighted lines are additions, red are deletions.

### 2. Stage changes

Staging means telling Git which changes to include in the next commit.

* Hover over a file name → click the **+** icon to stage that file
* Click the **+** next to the **Changes** heading to stage everything at once

### 3. Commit

<Steps>
  <Step title="Type your commit message">
    Click the message box at the top of the Source Control panel and type a clear description, for example: `Add weather data fetch function`.
  </Step>

  <Step title="Commit">
    Press `Ctrl / Cmd + Enter`, or click the **✓** (checkmark) button. Your snapshot is saved locally.
  </Step>
</Steps>

### 4. Push to GitHub

After committing, your changes exist only on your machine until you push:

* Click the **...** menu in the Source Control panel → **Push**
* Or click the **sync** icon in the bottom-left status bar (it looks like a circular arrow)

## Visual features

VS Code colour-codes the editor gutter to show file status at a glance:

* **Blue bar** — lines modified since last commit
* **Green bar** — new lines added
* **Red triangle** — lines deleted

Click any coloured bar to expand a mini diff panel right inside the editor.

## Common VS Code Git tasks

<AccordionGroup>
  <Accordion title="Initialize a new repository">
    1. Open your project folder in VS Code
    2. Open the Source Control panel
    3. Click **Initialize Repository**

    Git is now tracking your project — no terminal needed.
  </Accordion>

  <Accordion title="Clone a repository">
    1. Press `Ctrl / Cmd + Shift + P`
    2. Type **Git: Clone**
    3. Paste the GitHub URL
    4. Choose where to save it
    5. VS Code opens the cloned project automatically
  </Accordion>

  <Accordion title="Create a .gitignore file">
    Create a new file named `.gitignore` in your project root. A solid Python starting point:

    ```text theme={null}
    .venv/
    .env
    __pycache__/
    *.pyc
    .vscode/
    .DS_Store
    ```
  </Accordion>

  <Accordion title="Discard changes">
    Made a mistake and want to revert a file to its last committed state?

    1. Open the Source Control panel
    2. Right-click the file
    3. Select **Discard Changes**
    4. Confirm the prompt

    The file is restored to its previous version immediately.
  </Accordion>
</AccordionGroup>

## The sync button

The bottom-left status bar always shows your Git status. Look for something like **↓ 3 ↑ 2**:

* **↓ 3** means there are 3 remote commits to pull down
* **↑ 2** means you have 2 local commits ready to push

Click the icon to sync both directions at once.

## Terminal vs UI — a quick comparison

Both approaches are valid. Use whichever feels natural:

| Task        | Terminal command          | VS Code UI             |
| ----------- | ------------------------- | ---------------------- |
| Stage files | `git add .`               | Click **+** icon       |
| Commit      | `git commit -m "message"` | Type message + `Enter` |
| Push        | `git push`                | Click sync button      |
| Pull        | `git pull`                | Click sync button      |

## Tips for a healthy Git habit

1. **Commit often** — Small, frequent commits are easier to understand and revert than large ones
2. **Write clear messages** — `"Fix login bug"` is useful; `"changes"` is not
3. **Pull before you start** — Always get the latest changes before beginning a work session
4. **Guard your secrets** — Double-check your `.gitignore` before every commit

<Warning>
  Never commit `.env` files or API keys. Always list `.env` in your `.gitignore` before you make your first commit in any project.
</Warning>

## What's next?

Now that you know Git, it's time to learn how to keep your API keys and configuration values safe using environment variables.

<Card title="Environment & Secrets" icon="key" href="/tools/environment/index">
  Keep your API keys out of your code
</Card>