I finally got round to creating my colleagues and I an account on Microsoft Visual Studio Team Services (VSTS). If you haven’t looked into it then basically it is the cloud version of Microsoft Team Foundation Server (TFS) which is typically run within your own environment and managed internally. We have been looking to move our current scripts, functions and whatever other code we have written to a new management platform and while there are plenty I decided to try VSTS. For us it fits nicely as the free version supports up to 5 users which covers the team and our manager.
I am also in the process of encouraging the team to move to Microsoft Visual Studio Code (VSC) as the preferred integrated development environment (IDE). Typically we use the Windows PowerShell ISE for a lot of our development and while most of our work is done in PowerShell there are occasions where other languages are required. The VSC product has a wide range of extensions to enhance the default experience and facilitate coding across multiple languages. In this post I will cover setting up a VSTS account (the free one) and then connecting VSC to it via Git.
If you want a quick overview of VSC then check out the link above or my previous blog post – https://www.bytesizedalex.com/microsoft-visual-studio-code/
Right, let’s get down to business!
I’m going to assume you have VSC installed and that you have an account which can be used to login to Microsoft Live services as this will be required to setup a VSTS account.
Create VSTS Account
Navigate to the following URL and click to create a free account – https://www.visualstudio.com/team-services/
You should be redirected to a new page where you can enter a chosen name for your project (account) along with the source control method. In my case I have chosen to use Git and will continue the instructions in this post on the assumption you are going to do the same. If your chosen name is unavailable the system will prompt you to enter a different one. When you are ready click ‘Continue’ and the system will take a moment to create your account.
Assuming all has gone to plan you should be presented with a new default ‘MyFirstProject’ page. Here you can rename the project and give it a description along with various other attributes. We also have the required links to connect to our IDE plus generate Git credentials. Keep this page open and we will come back to it once our VSC setup is ready.
Install Git for Windows
Git for Windows can be downloaded from the official site using this link – https://git-scm.com/download/win
The Git installer will prompt you for a number of decisions, I will provide screenshots from my install as a reference though I highly recommend you review each setting carefully to fully understand the impact of any choice made.
If you are running this in a Windows Active Directory domain environment you may wish to use the second option leveraging Microsoft Schannel so that certificates provisioned from an internal certificate authority (CA) are recognised properly.
Depending on the version of Windows you are running you may wish to take advantage of the MinTTY shell as it offers some of the nicer features which came to the console in Windows 10 but do not exist in prior versions.
At this point you should have Git successfully installed – if for some reason you encountered errors or problems installing you will need to resolve these before moving to the next step.
Install VSC Visual Studio Team Services Extension
Now that Git is installed we can move on to adding the VSTS extension in VSC – this is a simple process and I commend the VSC team for making extensibility so simple.
Open VSC and then either click on the Extensions button or use the keyboard shortcut CTRL+SHIFT+X
This will open a new menu bar – enter the search word ‘team’ in the box and you should find the ‘Visual Studio Team Services Extension’ at the top of the list. As you will see there are a couple of buttons for installing.
Once the install has completed you will be prompted to reload the VSC window which you should do now.
Now that we have installed the extension it’s time to complete the last few steps in the process of integrating VSC and VSTS.
Connect VSC with VSTS
Remember I told you to keep the webpage open, well this is why. First make a copy of the repository path so we can clone it to our computer, we will need this in a few steps so keep it handy for now.
We need to create a new Git credential which VSC will use to connect with VSTS. Now we will create our credential in preparation for the repository clone. Click on the ‘Generate Git credentials’ button, this will expand a new menu – create a new personal access token for assignment to VSC.
This will open a new window where we can add our new token.
We now need to provide a description and set an expiry value for the access token. Make sure you provide a suitable description to help differentiate tokens, the expiry time can be set to either –
- 90 days
- 180 days
- 1 year (365 days)
When done scroll down and click to create your token.
This part is very important, copy the token now! As the red text indicates, Microsoft do not store the token code so if you don’t copy it now you will have to go through this process again. Also be mindful of the expiration date and plan to create a new token when required to enable continued access.
OK we now have our personal access token and the link to our repository. It’s time for us to jump back into VSC and complete the integration process.
With VSC open we need to bring up the command palette – we can use F1 or CTRL+SHIFT+P
We can enter search terms and other commands here – right now we will type Git to see what comes up.
OK we have the option to use Git to clone a repository – this is what we will do to link VSC with VSTS. We can use the text in our command palette with the Git clone option –
- >Git:clone
Having pressed Enter to execute the Git:Clone command you should see the command palette change to asking for the repository URL. Enter your VSTS repository URL (the one we copied earlier) and then hit Enter again to progress to the next step.
Next we need to provide a local directory location for our VSTS repository to be cloned to. In my case I am going to use “G:\Visual Studio Team Services” – select an appropriate location on your own system.
All being well you should see VSC indicate it is cloning your repository and an authentication box will pop up – enter the Microsoft account details you used to create VSTS. 
You should see a prompt asking whether you wish to open the cloned repository, click to open it now.
You might be wondering why I got you to create a personal access token if we just authenticated using our Microsoft account. Well we are now presented with an error message telling us we are not connected to Team Services (VSTS) – you can click the ‘Learn more…’ button to be taken to a website with additional information but the simple explanation is we need to sign-in to the service.
To sign-in we will again make use of the command palette, this time using some of the Team Services commands.
You should now be prompted to enter your personal access token.
Now if you’ve done everything right VSC should be connected.
Huzzah! Everything is connected and we can now start to leverage the advantages of a Git repository and all it’s functionality alongside that of Visual Studio Team Services. I won’t be covering how to create content and commit it in this post as I want to keep it specifically to integrating VSC and VSTS however you are welcome to comment below indicating a desire for future posts on these topics.
1 thought on “Visual Studio Code and Team Services Integration”