How To Integrate Gitlab With Vs Code: A Step-by-step Guide| Setup GitLab account in VS Code In 9 Min

okay so in this quick session we are going to see how to integrate gitlab with DVS code so we are going to set up the gitlab account in the vs core to perform the push and pull operations from the vs code so just follow these simple steps so first we are going to sign up on the gitlab and we will login into the gitlab okay then we will need to create the SSH key pair for push and pull operations so once shss key is done then we are going to add the gitlab extension in the vs code so using that extension we are going to add the gitlab account in the vs code and once gitlab account is created and added in the US core we can clone any gitlab reposit okay and you can push your changes your local changes to the gitlab require as well so for the sign up just go to the official gitlab website and click on register now so just fill this information and create the gitlab account so once you login into the gitlab second step is to create the public and private SSH key pair so to create the SSH key just open the git bash on your local machine and type SSH icon keychain press enter press enter press enter again so normally this key will be created on your local machine in the dot SSH folder in the user's account so open the public key in the notepad plus plus or any other editor and copy that key content go back to the gitlab click on your profile then go to the preferences then click on SSH keys so here we need to add our public key content so click on add new key press the public key and scroll down you can set any expiration date as per your requirement so that key will be valid up to that period only so I will click on ADD key so as we have set up the SSS key in the git layer we can easily perform the push and pull operation from the local machine so next step is to add the gitlab extension in the vs code so open the US code and go to the extension window here just search the gitlab workflow so this is the expression we need to install so with the help of this gitlab vs code extension we will be able to integrate our gitlab in the vs code click on install once the extension is installed successfully in the vs code you can see this gitlab logo on the left hand side now we need to add the gitlab account in the vs code with the help of gitlab workflow extension so click on gitlab workflow so there are two ways by which we can set up the gitlab account in the vs code so this is the one way connect gitlab.com with the oauth okay and another way is by clicking on this add account button so first let's see how we can connect to the gitlab.com with the oauth so click on that button click on allow then click on open click on authorize click on openvs code Studio allow this extension to open this URI click on open so once account is added you can see the message here that account gitlab.com is automation has been added to the vs code so now we can clone any gitlab repository available in my gitlab account so click on open source control so here you will get options open folder or clone repository click on clone Repository so you can clone any repository from the Gator by providing the URL of the repository or you can clone from the git layer so just we have created the account so you will be able to see all the gitlab reposit available on my account in the EVS code okay so all these repository I have already created on my gitlab account so let's try to clone this multiple form so you can select anyone from this git the SSH URL or https URL find the local machine you need to select the folder in which you need to save all the code from that Repository let's say I am going to save that in the gitlab demo folder so it is going to clone the git repository here so once it is done directly you can open that clone repository so click on open so now you can see the project from the gitlab in the EVS code now so now as we have added the gitlab account in the vs code you can do any changes in the code and you can commit and push those changes in the git Library post so using the command palette option in the US code you can perform any gitlab operations so just go to the view and you can click on command palette or you can use this shortcut Ctrl shift p to open the command palette so to perform any gitlab operation just type it left so here you will get the list of operation you can perform with the help of grid lab so I am going to remove the gitlab account we just created okay we just added in the vs code so that we can see the second way so here I will go to the say colon remove account from the vs code so I will close this folder so again go to the gitlab so again we are going to add our gitlab account using this second option so click on add account so here we need to add the token from the gitlab into the vs code so go back to the gitlab so under the user setting go to the access tokens so we need to add the personal access talk on into the vs code so first click on add new token so here I will provide some name open for let's say vs code select the expiration date from this calendar so from this scope I can select API and read API as of now as per your requirement to consulate any other permission levels click on create personal access token so copy this personal access token go back to the EVS code hit enter here paste your gitla personal access token hit enter so once account is added you can see this message added the gitlab account for the user is automation on the https gitlab.com okay so this is the second Way by which you can add the gitlab account into the EVS code so again we can clone any repository from the gitlab select any repository you want to clone and select the URL and vs code now clone that git Repository okay so I can directly open that project by clicking on the open or I can click on this open folder then go to the folder destination and select the folder so what are projects available in that folder on the local machine will be open in the vs code now so now I can make any changes into the code on my local machine and I can push the changes to that reply positive let's say I'm going to add one comment over here changes from the vs code save that file so click on Source control so I want to commit uh code changes from this project to my gitlab repository so here I need to provide the commit message click on these more actions and click on Commit and push so select test that I want to State all these files first on my local gate Repository so from the staging area app from the local gate all those files will be committed and post to our remote gitlab Repository okay so let's verify those changes so go back to the gitlab and open the project refresh the page so you can see this commit changes from the US score so we have got our changes done from our vs code on the local machine to our gitlab proportion so using the command palette as well you can clone any gitlab Repository so just type again gitlab click on open remote Repository so let's open in a new window so as we have already added the gitlab account I can select a project to clone so select any Repository then it will ask you to select the branch there I have only Master Branch I will click on master so let's say this is my folder name press enter so that project will be open in the new window in the vs code now so with the help of command palette also you can't open any project from the gitlab into the vs code so this is how you can integrate the gitlab with the vs code

Channel: AJ AUTOMATION

Views: 18,544

Keywords: Integrate GitLab with VS Code, Setup ssh key for Push / Pull operations, Add GitLab Account in VS Code, Clone any GitLab repository VS CODE, gitlab vs code, gitlab vscode, gitlab vscode extension, gitlab vscode push, github vscode integration, gitlab vscode access token, gitlab vs code setup, gitlab visual studio code ssh key, command palette vscode, add gitlab in visual studio code, How to configure Gitlab in Visual Studio Code, Using Git with Visual Studio Code, vs code

Id: 8absK-_TPqE

Length: 9min 42sec (582 seconds)

Published: Thu Sep 21 2023