VS Code, WPI Example - committing to GitHub

Technical Programming
1

Hi All, and Git gurus in particular

VS Code is great, The WPI extensions are awesome, the example programs are great.

Getting a new example into GitHub is not so much fun…

This is the process I have found to work after a couple of hours of playing around. I plan to give this to my students, but I am posting here in the hope that there will be suggestions for improvement.

I would welcome comments from any Git gurus about a better sequence.

  1. Create a new repo on GitHub (my example is GettingStarted). Importantly, do NOT initialize with README, license etc.

  2. In VS Code, use the WPI extension “Create Project” to create a new project (I used the GettingStarted example). Make sure you have ticked the “Create new folder” option

  3. In VS Code, go to the Source Control pane. It will say “No source control providers registered”. Initialize a new local repo by clicking the little button at top left of the pane (hover over it and it will say “Initialize repository”). It will ask you to pick a workspace folder - I have been using the same folder as the project.

  4. It will then ask if you want to open the new repo or add to workspace. I have been adding to workspace.

  5. The source control pane will now show all the files that have been added. Hover over the heading “CHANGES” and you will see a “+” appear, to stage the new files. Click the “+”.

  6. Now at the top of the pane, click the tick mark to commit the staged changes to the local repo.

  7. We are half done - we have a local and a remote repo, but they are not connected. Open a terminal window (see the “Terminal” command in the VS Code menu bar)

  8. In the terminal window, enter the following git commands:
    git remote add origin https://github.com/<repo owner>/<repo name>.git
    git push -u origin master

<repo owner> and <repo name> are replaced with the correct values from the repo you created in step 1. You can actually copy the URL from the button in GitHub that says “Clone or download”. For example, mine looked like:

git remote add origin https://github.com/CDM-Robotics/GettingStarted.git

  1. Now go to your repo on GitHub and refresh the page - you should now see your project files.

Now to update from your local to GitHub.

Make a small change to one of the files. Make sure to save the file.

Go to the Source Control pane. If the CHANGES area is not showing anything, go back and make sure you modified and saved a file.

Click the “+” button to stage the change, then the top tick mark to commit to the local repo. You might want to put a message in the message box first (“First modify” or something more profound)

Now click the ellipses near the tick mark, and select “Push to…”, then select the GitHub remote.

Now go back to GitHub and check the modification has made it through.

As noted above, any comments on improving this process would be very welcome.

Regards
David Evans
6072 - TritonTech

2

That seems like a pretty standard flow to set up and then commit to a git repository.

The setup steps can happen in a slightly different order. For example, rather than setting up the origin, you could clone your empty remote, then set up your project, then commit the files. But, both are acceptable flows for git.

For the commit in particular, your steps line up to:

Go to the Source Control pane. If the CHANGES area is not showing anything, go back and make sure you modified and saved a file.

This is git status.

Click the “+” button to stage the change, then the top tick mark to commit to the local repo. You might want to put a message in the message box first (“First modify” or something more profound)

This is git commit.

Now click the ellipses near the tick mark, and select “Push to…”, then select the GitHub remote.

This is git push.

3

Thank you.

That is how I originally thought of doing it, but I wanted the students to be able to use the WPI “Create Project” option, and was not sure how to do that with a cloned remote project already set up.

Any thoughts?

Regards

David

4

The project setup probably detects a .git in the directory and then uses that git repository. If that’s not found, it does a git init, when then starts the typical remote setup flow…

git init
git remote add origin <url>
git push origin master

If you had followed the clone flow, it would have been
git clone <url>
(create your new VS Code Project)
git commit
git push

For your students, you either do the create project once globally and commit/push the project or you add a .gitignore to tell git to not track files related to the project setup. If you commit project files then everyone uses the same project. If you use the .gitignore approach, then everyone has a local project and just the source gets committed.

There’s pluses and minuses for each.

Everyone having their own project means that local paths, settings, preferences, etc never make it to git. But, this scenario can lead to mismatches of paths to dependencies and can result in a lot of settings debug.

Everyone using one project can lead to merge headaches because git analyzes diffs on a file level and won’t account for format requirements of VS code. Same goes for just about every IDE’s project files.

5

Thanks again. I will continue playing.

6

In VSCode, if there is one keystroke you should remember, it is (on Windows) Ctrl-Shift-P.

Then type Git in the command dropdown and you’ll get all the options that the plugin exposes (the list scrolls…it’s not obvious). You can init, push, pull, tag, etc from this list. No terminal required.

7

Thanks Chuck

8