World 0: Start Here

Git inside VS Code

You will learn: where Git lives in VS Code, and what each part does.

The problem

~/diary $ git statusOn branch mainChanges not staged for commit:  (use "git add <file>..." to update what will be committed)  (use "git restore <file>..." to discard changes in working directory)        modified:   index.htmlUntracked files:  (use "git add <file>..." to include in what will be committed)        style.cssno changes added to commit (use "git add" and/or "git commit -a")

This is git status in a terminal. That’s a lot of words. Is there an easier way to see it?

Try it

This is VS Code, a free code editor. Tap each glowing dot.

Tap the glowing dots to explore.

0 of 7 explored

Watch

~/diary $ git add style.css~/diary $ git commit -m "Add styles"[main 0a7422c] Add styles 1 file changed, 1 insertion(+) create mode 100644 style.css

The buttons run the same Git commands. Clicking + runs git add. Clicking Commit runs git commit.

Predict

You click + next to style.css. Where does it go?

Check

In the diff, one line is green. What does green mean?

Watch

~/diary $ git log --oneline3a12797 (HEAD -> main) Add home page6d3a9b1 Add README

VS Code has a terminal inside, too. Open the Terminal menu, then New Terminal. Every command from this course works there.

You did it!

You can now find Git’s buttons in VS Code.

Go deeper (optional)

Hover over a file in Changes to see more buttons. The curved arrow throws away your changes, so use it with care. Install VS Code from code.visualstudio.com. It works on Windows, macOS and Linux.