GitHub in VS Code

• 1. Initial setup
  • 1.1. Prerequisites
  • 1.2. Accept collaboration invitation
  • 1.3. Clone repository to local folder
• 2. Rinse and repeat workflow
  • 2.1. Open cloned repository
  • 2.2. Create a feature branch
  • 2.3. Make changes on feature branch
  • 2.4. Push feature branch to main branch
  • 2.5. Delete local branch after feature is approved
• 3. References

1. Initial setup

1.1. Prerequisites

1. Create GitHub account
2. Install Git
3. Install VS Code Stable
4. Install GitHub Pull Requests and Issues VS Code extension
5. Receive invitation to be added as collaborator of a repository

1.2. Accept collaboration invitation

1. Open browser
2. Open https://github.com/username/repo-name
3. Accept invitation to be added as collaborator of the repository

1.3. Clone repository to local folder

1. Open VS Code
2. Open Command Palette Ctrl+Shift+P
3. Type git clone and hit enter

4. Select Clone from GitHub

5. Type username/repository-name

6. Click Allow if The extension 'GitHub' wants to sign in using GitHub.
7. Sign in with your GitHub account
8. Select location to store repository
9. You have successfully cloned an online repository to local desktop!

2. Rinse and repeat workflow

2.1. Open cloned repository

1. Open VS Code
2. Select File on top left corner

3. Select Open Folder...
4. Select location of stored repository

2.2. Create a feature branch

1. Make sure you are in branch main on bottom left corner

2. Click Sync Branch button on right side of main (cycle arrow icon)

3. Click branch main on bottom left corner
4. Select Create new branch...

5. Type feature/feature-name and hit enter

6. Click Publish Branch button on bottom left corner and right side of feature/feature-name (cloud arrow icon)

7. Click Close button if Would you like to create a Pull Request for branch 'feature/feature-name?' pops up

8. You have successfully created a feature branch!

2.3. Make changes on feature branch

1. Make sure you are in branch feature/feature-name on bottom left corner

2. Make changes (create, edit, delete files)

2.4. Push feature branch to main branch

1. Only push feature branch when your task is complete
2. Make sure you are in branch feature/feature-name on bottom left corner

3. Click source control on left sidebar or Ctrl+Shift+G

4. Hover Changes and click + Stage All Changes button

5. Click Message input box above / Commit button
6. Type feat: add feature-name

7. COMMIT_EDITMSG will open if you skip step 6. Close COMMIT_EDITMSG and do step 6.

8. Click / Commit button
9. Click Sync Changes button

10. Click GitHub on left sidebar

11. Hover PULL REQUESTS and click Create Pull Request button (plus arrow dot icon)

12. Make sure base is main and merge is feature/feature-name

13. Click Create
14. You have successfully requested to push feature branch to main branch!

2.5. Delete local branch after feature is approved

1. Make sure you are in branch main on bottom left corner

2. Open Command Palette Ctrl+Shift+P
3. Type git delete branch and hit enter

4. Select feature/feature-name that has been approved

Congratulations. You are now a GitHub collaborator!

3. References

1. Introduction to Git in VS Code
2. Working with GitHub in VS Code