Beginners Guide: How to Use Git and GitHub with VS Code (Visual Studio Code)

Programming and Developement Web development
, , ,
1

How to Use Git and GitHub with Visual Studio Code

Learn to manage your code and share it online using Git, GitHub, and VS Code. Think of Git as your project’s smart history tracker, and GitHub as its online home for backup and collaboration.

What You’ll Need

  1. GitHub Account: Sign up for free at github.com.
  2. Visual Studio Code (VS Code): Download from code.visualstudio.com.
  3. Git: Install it for your OS from git-scm.com.

The Process: From Local Code to GitHub

1. Tell Git Who You Are

Git needs to know your identity for each change you make. Open your Terminal (or Git Bash on Windows) and run the following commands, replacing the placeholders with your actual name and email:

git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

2. Create Your Project’s Home on GitHub

This is where your code will live online.

  1. Go to github.com and log in.
  2. Click the + icon in the top right corner of the page, then select “New repository.”
  3. Repository Name: Enter my-project (or a descriptive name for your project).
  4. Description: Provide a brief summary of your project (optional, but recommended).
  5. Visibility: Choose Public (anyone can see your code) or Private (only you and those you invite can see it).
  6. Initialize this repository with a README: Check this box. A README file is crucial for explaining your project to others (and your future self!).
  7. Add a .gitignore: If your project is in Node.js or JavaScript, select “Node” from the dropdown. This file tells Git to ignore specific files (like temporary files or sensitive API keys) so they aren’t accidentally committed.
  8. Click the green “Create repository” button.
    Keep this GitHub page open; you’ll need its URL shortly.

3. Get Your Project Ready in VS Code

  • For an Existing Project: Open VS Code, navigate to File > Open Folder..., and select your project’s directory.
  • For a New Project: Create a new folder on your computer for your project. Then, open VS Code and go to File > Open Folder... and select your newly created folder.

4. Initialize Git Locally in VS Code

Tell Git to start tracking changes within your project folder.

  1. Open the Source Control view in VS Code. You can find it by clicking the icon that looks like three connected dots on the left sidebar.
  2. If you see a button labeled “Initialize Repository,” click it. This is VS Code’s way of running the git init command in your project folder, making it a Git repository.

5. Stage and Commit Your Files (Using Terminal Commands)

Saving a “snapshot” of your project’s current state is called a commit. Before you can commit, you need to “stage” the files you want to include in that snapshot.

  • What are Staging and Committing?

    • Staging (git add .): Think of this as selecting which changes you want to group together for your next save point. git add . is a shortcut to stage all modified or new files in your current directory and its subdirectories.
    • Committing (git commit -m "Your Message"): This is the act of saving the staged changes as a distinct version in your project’s history. Each commit has a unique identifier and a descriptive message explaining what changed.

  • How to do it in VS Code:

    1. Open VS Code’s Integrated Terminal by pressing Ctrl + ` (that’s Ctrl and the backtick key).
    2. Stage all changes: Type the following command and press Enter:
      git add .
      This tells Git to prepare all the current changes for the next commit.
    3. Commit your staged changes: Type the following command, replacing "Your descriptive message" with a clear explanation of what you’ve done (e.g., “Initial commit: Add project structure and config”), and press Enter:
      git commit -m "Your descriptive message"
      You’ve now created a save point with your changes and a description.

6. Link VS Code to Your GitHub Repository and Push Your Changes

Now, you’ll connect your local project to its online home on GitHub and upload your commits.

  • What is git push?

    • Pushing (git push origin <branch-name>): This command uploads your local commits to a remote repository. When you first set up, you usually push to a remote named origin and a branch called main or master.

  • How to do it in VS Code:

    1. Copy your GitHub Repository URL: Go back to your GitHub repository page. Click the green “Code” button, and copy the HTTPS URL provided (it will look something like https://github.com/your-username/my-project.git).
    2. Add the Remote in VS Code (if you haven’t already):
      • In the Integrated Terminal (remember, Ctrl + ), paste the following command, replacing <YOUR_GITHUB_REPO_URL>` with the URL you just copied:
        git remote add origin <YOUR_GITHUB_REPO_URL>
      • Press Enter. This command tells your local Git repository where its remote counterpart (on GitHub) is located, usually named origin.
    3. Push your committed changes to GitHub:
      • In the Integrated Terminal, type the following command and press Enter:
        git push origin main
        (Note: If your default branch is named master instead of main, use git push origin master.)
      • VS Code might prompt you to log in to your GitHub account if you haven’t already. Follow the on-screen instructions.
        This command uploads the commits you made locally to your GitHub repository.

7. Verify on GitHub

Refresh your GitHub repository page. You should now see your project files, the README, and the commit message you created!

What’s Next?

You’ve successfully set up Git, made your first commit using terminal commands, and pushed your code to GitHub using VS Code! This forms the fundamental workflow for saving your progress, tracking changes, and collaborating with others. Practice these steps with every new feature or fix you implement.

If you have any suggestions or edits, please reply below.

And if you found this helpful, a :+1: would be much appreciated!

6 Likes
Guide Suggestions and Requests