Using VS Code with Azure DevOps Git Repos

in this video we use vs code with an azure devops git repo [Music] hello everyone i'm travis and this is fraltos this is a continuation of my last video on azure devops repos in that video we created branches and edited files in azure devops in this video we take it a step further by using git and vs code to create branches and edit files before we get started please take a second to like subscribe share with a friend and let me know your thoughts in the comments below become a member of the channel for early access to videos and check out my courses on udemy.com your support is appreciated back to it as mentioned already this is the continuation of my previous video on azure devops repos we use the web-based editor in that example in the real world you're more likely to use an integrated development environment or ide to write code we use vs code microsoft's free ide for this example vs code is a very capable id with support for most popular programming and scripting languages did i mention it's free coming up we're going to go over installing vs code and installing and configuring git then we clone a repo create a branch and push and pull updates between the local copy of the repo and the remote copy on azure devops let's get started with installing vs code okay let's start at the very beginning i'll put chapter indicators below if you want to skip ahead but for this we'll just start with installing vs code so here we are at the download page and we'll do a user install once it's finished downloading we can run it that will start the installer and i'm logged in as an administrator so i'll get this message but i can click ok and ignore it agree to terms defaults are okay for this install we'll let it finish once it's complete we can launch it i'll make it a little bigger when we first log in we get different options for our theme i'm going to select something lighter i think that shows up better in the recordings there we go and i'll make it a little bit bigger ctrl shift plus to make things bigger so now we have vs code set up if we go to the command palette which is control shift p and by the way if you're on a mac or a different os all of these commands are similar everything i'm doing can be found in the menus above to go to the command palette on windows it's ctrl shift p i'm going to search for get let's see if it has clone no there's no git clone so let's close this we'll go back to the web browser this time we're in the get download site there's a full gui client forget that's not what i'm using in this case for this example i'm just using get so we can go to the download for windows 64 bit is fine once that's done we'll run the get installer we can open the file here we'll go next and again the defaults are fine for this example we just need this application installed on the computer that way vs code can interact with get and use the features that get offers we can uncheck the view release notes and finish before we can use this with vs code we have to open up bash and update git with some information the installer added bash to this system get bash first we have to give git our username and i have these instructions on a blog post i did previously i'll include the link below all we have to do is run the command get config dash global user.name and then we'll add our username that adds the username to the global config so when we make changes with git commits for example it knows who's making the commitment next we're going to add an email address that command is git config dash dash global user.email and add the email address the version of git we're running on this computer now has my username and email address as we make changes with git that information will be embedded in those changes we can close bash and let's go back into vs code now we'll go ctrl shift p to open up the palette and let's search for git and now we have a few more get options that prepares our local workstation to use get from azure devops or really any other git based source control system let's go to azure devops next i have a project devtest i spelled the name correctly for this video let's hop over to repos this one's been initialized already we're in the main branch and there's no other branches we're going to cover most of the stuff we did in the last video i'll have the link below this time we'll do it from vs code we're going over two examples of how to clone this repo in this video the first example will clone by https path let's take a look at how that's done first we'll go to clone and then copy the path next we'll open up vs code open the command palette on windows that's ctrl shift p type in clone or git clone and we'll use git clone hit enter now it asks for the url paste in the url we copied from azure devops hit enter now i'll ask for a location of the repo i'm going to add this to a git folder located in my documents let's go to documents and you can add this in your own location this is just where i put mine we'll select the repository now it's going to copy the repo to the local machine but before it can do that we have to sign in to azure devops when the project was created i selected a private project so we'll add our account once signed in select open and yes we can trust the author now we have the main branch we can see that in the lower left hand side of the screen and we also have the readme file that's how we clone with a url let's try this again with the clone option in vs code we're going to close vs code and before we clone it again open up file explorer once open navigate to the location you cloned the code to documents get for my example there's the repo devtest there's only one file in the folder the readme file but if we go to view and display hidden items we have a hidden.get folder open that this is all of the source code tracking information for the repo this is the database for get we don't need to change anything in here i just want to point out that the logic used for git is stored in the directory in a hidden folder let's go back to the get folder and we'll delete this repo file we haven't made any changes and we're going to redownload it again in the next step we can close file explorer and go back to azure devops now we'll do the second example of using clone and vs code so we'll go to clone and we have the ide option and we have a list of different ides we can clone to we'll leave it set to vs code and clone when prompted open up vs code and it'll ask if we want to allow the extension to open up a uri let's select open and again we have to provide a local location for the repo so we'll go back to that git folder and open and if we're working on multiple projects we need to come back to this one we can just go to file open recent and there it is that's the two ways to clone a repo to vs code with azure devops repos let's move on to branches we only have one branch main in this example if we click on main in the lower left corner we get an option to create a new branch let's select that give it a name dev for this example hit enter and now we have two branches click on dev in the lower left hand corner we can switch back to main and go back to dev let's go back to azure devops if we go to branches there's only one this is what's meant by get being decentralized we made changes to the local copy but have not pushed those changes back to azure devops let's take care of that we're going to go back to vs code next to the dev branch in the lower left corner is an icon with a cloud we can publish our branch with this icon let's do that next if you see a message asking to run git fetch periodically you can click no to that message now let's go back to azure devops let's refresh the branches now it shows our dev branch let's look at pushing changes next go back to vs code and make sure you're in the dev branch by the way we're doing a lot of hopping back and forth between vs code and devops so we can see what happens when we make changes that's not a normal process when we're working with git we just want to see what's going on between the two for this example from the dev branch let's add a file to the branch code.text for this example notice the source control icon on the right shows one that indicates there's one change local that has not been committed let's commit and push the changes next click on that icon this is a two-step process we have to commit our changes that creates a snapshot of the changes in the local repo and then push the commits to the remote repo under the list of changes we only have one here but you can add any changes you want to commit with the plus sign you can commit all the changes with the plus sign next to commit click the plus sign next to the changes you want to commit if you modify a lot of files you can select and stage them individually to add it to the commit add a message for the commit add a file for this example once the comment is added click the check mark to commit the changes let's take a look back at devops go to files and switch to the dev branch the file isn't there that's because after we commit the change we have to push the change to the remote repo again this is a decentralized source control system so we have to update devops with our changes let's go back to vs code there's a big icon with the word sync that will do it but if we click on the three dots next to source control we have other options including push this will push the changes from our local repo to the remote repo let's select that now go back to devops we'll need to refresh and now the file shows up in the devops repo now what happens if the branch is updated in devops but not on the local computer for example maybe somebody else is working on the same branch and they push an update let's see what happens by updating the code.txt file we'll go to edit and add a line of text once you're done commit we'll add a comment once that's committed go back to vs code we can go into explorer and refresh the change isn't there let's go back to source control this time we're going to pull from the remote repo we'll click the three dots a poll is like a one-way synchronization from the remote to the local so let's go pull our code.txt file was updated from the remote repo we can now see the line of text it's important to keep your local repository up to date by periodically running git push and get poll or just synchronizing the changes vs code doesn't natively support pull requests there are a couple extensions you can add but we can create them from devops as shown in the last video let's go back to devops go to pull requests we'll create a new poll request give it a name add file for this example the rest is optional click create then we can go to approve and complete we'll use a merge and won't delete the dev branch this is a brief overview of the pull request a production environment would have safeguards around who can approve poll requests and the number of reviewers required for approval there may also be a code review process involved as well for this example we just completed the poll request by ourselves that is how to use vs code with azure devops git repos i hope this helps you better understand how to use vs code with git please don't forget to like and subscribe and thanks for watching

Channel: Travis Roberts

Views: 54,019

Keywords: Repos, Repositories, Azure repos, DevOps repos, DevOps, Azure DevOps, Git, GitHub, Teams Foundation Server, TFS, Server, Code, Cloud, Cloud Services, Iot, IaC, Infrastructure as Code, azure devops tutorial for beginners, Scrum, Agile, Kanban, development, branch, branching

Id: OBmhKQhrO6U

Length: 14min 38sec (878 seconds)

Published: Sun Jul 03 2022