How To: Git and VS Code

So you have git working with VS Code (even if it’s a local TFS server), and you were wondering: Now what? Well, now you git to work.

A Note

I’m going to take a moment and say this: This post does not include best practices. Your, or your group’s, decisions on what workflow you want to use with git (be it gitflow, or github flow, or something else) are very important and not to be taken lightly. This post will merely look at some basic VS Code git functionality. Emulate this (improper) workflow at your own peril.

On with the show

So your first action is to, of course, open a git project in VS Code. From there, you can access the git panel on the left of your window.

image

Clicking the ellipses button (the three dots) will provide you with the git options at your disposal. I like to regularly pull changes to the project just so I can (hopefully) avoid merge conflicts. Besides, every once in a while you’ll get lucky and someone else’s fix also fixed your bug.

Pull (Rebase) is also an option. Basically, it gives priority to your code, overwriting any conflicts that are in the server code. This can be really useful, or could undo others’ work. Just be aware.

All of this is moot until you make changes to the files. If the file you change isn’t affected by the .gitignore rules, it’ll show up in this panel once you save it.

image

That curving arrow is the undo button (changes will be lost), while the plus button is to stage your change. Staging is useful as it can allow you to segment your commits if you need to keep the changes logically separate. Clicking on the file name will result in a side-by-side comparison of the file in a before- and after-changes view.

Now, you’re ready to commit your files. You can’t pull or push with uncommitted changes, so be sure to handle that first. Assuming you don’t get conflicts, everything is done and you can see the updates on your TFS server.

Of course, problems happen, and you can get a conflict where the system can’t tell which code to keep (yours or what is on the server). In this case, you’ll see something like this:

image

Note the purple icon, and the angle brackets. The local code is in the first part marked HEAD, while the server code is after the equal signs. Erase the extraneous lines (in the pic, that’s lines 11, 13, and 15), change your code to include or compromise the server code, or simply delete the server code. Now you have to commit and push again.

And with that, you have a high level overview of working with git. Now you just need to read up on branching, syncing, and workflows.

This entry was posted in How To and tagged , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s