VS Code: Git Extensions
"Alone we can do little; together we can do so much." -- Helen Keller
Photo by Matteo Vistocco on Unsplash
Today we are going to go through the Visual Studio Code extensions for GitHub and GitHub Pull Requests and Issues. A whole tutorial series exists on Git and GitHub on this site.
To get started, clone any GitHub repository (e.g., my incantations repo), then start VS Code:
mkdir git
cd gitgit clone git@github.com:mday299/incantations.git
Cloning into 'incantations'...
remote: Enumerating objects: 46, done.
remote: Total 46 (delta 0), reused 0 (delta 0), pack-reused 46
Receiving objects: 100% (46/46), 20.65 KiB | 704.00 KiB/s, done.
Resolving deltas: 100% (18/18), done.code
Then open the git folder in VS Code with File > Open Folder.
To install any extension in VS Code you need to click on the “4 square” icon. There you can search for each extension individually. A screenshot of what I’m referring to is shown below:
Extension search for GitHub in VS Code
Once all extensions are installed we need to log in to GitHub and GitLens. To authorize VS Code to access GitHub left click as shown in the figure:
Left click here in VS Code to sign in to GitHub and GitLens
When you click to authorize GitHub to access VS Code you should get a window up in your browser that looks like this:
VS Code needs permission to access GitHub
Click the "Continue" button and you're off and running. You'll also need to authorize GitLens to access GitHub.
Note that you will not have access to my incantations repo (if you are using it), but you can make a pull request against it, documented here.
Let's start a new branch named "my_feature" in whatever repo you've chosen. To do so, click on the source control icon as indicated below:
VS Code Git dialog can be accessed here
This should bring up a dialog with a "+" sign where you can create a new branch. Enter "my_feature" as the branch name. This should update the VS Code window as follows:
The my_feature branch in VS Code
Now let's add a new feature. In the VS Code explorer, navigate, e.g., to the incantations/scripts directory and add a "hello world" style script. Python for VS Code is covered here. Enter the following code into that script:
print("Howdy World.\n")
Then run the script by selecting "Run > Start Debugging" and choose "Debug the currently active Python file" in the dialog. You should end up with a screen similar to the following (please note I'm using Conda vice Python so your mileage may vary):
helloWorld.py script in VS Code with Git ‘U’ highlighted
Pro Tip: you will want to make any code you create run as an executable. To do this you use the chmod Linux utility as follows:
cd <path_to>/incantations/scripts
chmod 775 helloWorld.py
ls -l helloWorld.py
Which should result in output similar to the following:
-rwxrwxr-x 1 mday mday 23 Apr 26 10:44 helloWorld.py
Returning to VS Code from the terminal, you will notice that Git has marked the helloWorld.py file with a “U” meaning "untracked" and highlighted it in green (depending upon your color theme it may be highlighted in a different color). To stage your changes go to the Source Control section and mouseover the "+" sign. The Source Control section is shown below:
VS Code Source Control
Once your changes are staged the "U" will change to an "A" (git add) meaning "added" (but, importantly NOT committed). You can also unstage (git reset) by clicking the minus "-" symbol. You then can specify a commit message: (documented here). See the image below:
VS Code Source Control — note the “Hello World example Python script” and the commit history.
I could not figure out how to get VS Code to consistently do a pull request. See here for documentation on how to do this. Because I already have write permission on my incantations repo I simply enter at a terminal:
cd <path_to>/incantations
git push origin
You can now create a pull request based on the image below:
Pull request icon in VS Code
Creating a pull request should bring up this page in your browser:
Git Pull Request
Next time I will demonstrate the GitLens VS Code extension.
Credits
https://code.visualstudio.com/docs/editor/versioncontrol
https://zeroesandones.medium.com/how-to-commit-and-push-your-changes-to-your-github-repository-in-vscode-77a7a3d7dd02
https://stackoverflow.com/questions/46877667/how-to-add-a-new-project-to-github-using-vs-code/63898638#63898638
