Tuesday, June 19, 2018

Connecting Visual Studio Code with your team project on VSTS using Git as version control

Who does not love Visual Studio code, everyone does. Its not just an editor emmet, source control integration, keyboard shortcusts, json based packages, thousands of benefits. It took me time to learn how to connect it to VSTS with git, so blogging about it.

Got to VSTS create your team project if a new one you are creating or use an existing one, also make sure to create a security token, here are the steps

Create VSTS project and security token


  • Go to visual studio online:- https://www.visualstudio.com/vso/, login with your credentials.


  • Click New Team Project or just click an existing project, i have used Git and Scrum as VC and Work Item process.




  • Once its created, open the project and copy the HTTPS endpoint, for cloning.
  • Dont forget to create a read me and gitignore file.
  • Next lets create a security token to authenticate the repository from external tools like VS code.
  • For creating the token go to your profile and click security in the drop down :-














  • Next click ADD and create a new token:-
  • As it says please save your token from somewhere where you can reuse it as it appearonce at this interface, so i have copied it on a notepad and saved it on my desktop:-


Add a repository using bash


  • Next if you dont have GtBash(GIT) installed on your system, then i will request you to please install it from this location: https://git-scm.com/downloads

















  • Once installed open Gitbash and open the folder location where you will keep your repository by using this cd d:\{yourlocation}, as shown here:-







  • Now clone your repository by using this command as shown here:-
$git clone {url}

  • you an either provide your credentials in the window pop up appeared or cancel it enter manual as shown here:-


  • User Name is your email address and password is the token we copied, it will clone the repository like this:-


















Connect to repository in VSCode

  • Next Open VScode and open your folder just cloned now.






  • Install the VSTS extensions if not installed allready:

  • Next, lets connect to the Team services, open the command pallete by pressing c+shift+p in VSCode as shown here :-

  • Select Team:signin command and select first option to provide a token manually:-
















  • Paste your token that we copied on the notepad earlier:-
  • Press and enter the you will notice that you are connected to VSTS :-

  • Next add a new file and you will notice VS Code will tell that you have one pending change:-











  • Enter the comment and press ctrl+Enter, it will ask to stage the code before commit, press ok.









































  • Your changes are committed to your local repository, now to move it to your master branch. Press sync button on below left corner:-























  • At times it may ask multiple times to enter your credentials, please add and proceed.
















  • Go to VSTS site now and you can see index.html file is added to your master repository:-









You have made it, VSCode is now connected to VSTS and Git is your version control.

No comments:

Post a Comment