Connect Visual Studio Code with Visual Studio Team Services (VS Online) Git repository

Friday, November 11, 2016

In this tutorial I will write about integration between VS Code and  Visual Studio Team Services (VS Online.)... a lot of VS in the first sentence but just follow the tutorial there will be more. First of all we need to have installed VS Code on our local machine and to have VS Team Service account, you can create it here:

Visual Studio Team Services [part]:

I already have an account so I will just sign in to VS online account. After I sign in I will create new project on VS Team Services. So under Recent project click on New, and fill some information about your new project.

For Project name set some name for your new project and Description if you want, for methodology I am fine with Agile and to follow this tutorial you will need to choose Git as an Version control like this:

Now we can click on Create project and wait couple of seconds to complete this operation.

When that is completed find your project under all projects and click on it.

When you click on navigate you will go to our new project "dashboard" now we need to set up some options about security and authentication.

Now go under you profile and click on "Security" sub menu item, go to Alternate authentication credentials click on Enable alternate authentication credentials and input your alternate password for authentication that we will you for git in next steps.

You can set secondary username but for me this kind of "setup" is ok. Click on Save and proceed to the next steps. Go back to your project dashboard and click on Code tab. And you will get this kind of screen:

As you can see we have Generate Git credentials but we set this in our last step.

Now you need to copy that HTTPS|SSH Url provided by Visual Studio Team Services for our project and go to VS Code on our machine.

Visual Studio Code [part]:

Create new folder on your local machine with some index.html code just in order to not have empty project and open that project with VS Code ... (you can do it with < code . > command in cmd.)

Before we continue with tutorial make sure that you have your local git repo, you can initialize it with VS Code from code editor and run your init commit and you are good to go:

Now open your project with context in cmd and run this command:

After first command you will associate your local git repo with git repo on the VS Team Services.
Run second command and after couple of second you will get prompt on windows to input your email and password.

You can follow procces for push in you command prompt and when all that is done you can navigate to Code tab in VS Team Services and you can see that our index.html file or some of your other project files are on the local repo in Visual Studio Team Services.

Now all our future changes can be pushed from VS Code to our repo in VS Team Service for our project.

To do that go to VS Code make some code change and navigate to git menu in VS Code,

As you can see we have main commands to mange our code and project using git.

Of course I will use push and if you go to your git repo on VS Team Services you will see changes that you done in your local project.

And you can see diffs from code editor. And that is it. Now you have your local project associated with git repo on the VS Online (Visual Studio Team Services). From now on you can work on project and push and pull and so on.

Hope this tutorial was helpful for you.

Best regards! ALMIR VUK |

You Might Also Like