GitLab and Visual Studio Code

Question

I'm trying to integrate Visual Studio Code as GitLab to perform version control of source code.

I did not find anything that would help me during the Google searches, so I'm asking here.

How can I integrate it?

I'm using GitLab's free account and I want to commit, push, and clone through Visual Studio Code. Is it possible?

Solution 1

In the Marketplace you find a lot of Visual Studio Code Extensions. They are labeled with tags, e.g.

• tag:git
• tag:gitlab

Which to use depends on your preferences and scenarios. I recommend and I am personally using GitLens — Git supercharged.

The installation in Visual Studio Code is easy, for GitLens e.g.:

Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

ext install eamodio.gitlens

The documentation you find on the extension page, see link above.

Solution 2

In Windows, once SSH keys are settled in your machine and you have Git installed (e.g., Git-2.20.1-64-bit.exe), you then need to setup the Git inside Visual Studio Code.

In the terminal of Visual Studio Code, set up the global configuration:

git config --global user.name "xx xxxx"
git config --global user.email "[email protected]"

In the same terminal, navigate to your local directory where you want to set up the remote repository from GitLab.

Then since you are creating a new remote repository in GitLab (e.g inside NewFolder with repo.git as the Git name) type:

git clone ssh://[email protected]/NewFolder/repo.git

In the same terminal, navigate to your newly created local folder called "repo":

cd repo

You can then add files into that local folder "repo". Then in the Visual Studio Code source control button, stage the changes and click the check icon to commit it.

Once committed, you can then publish it via the Visual Studio Code interface.

Or manually by typing:

git add .
git commit -m "Initial commit"
git push -u origin master

Solution 3

Note that, with GitLab 13.3 (August 2020), this is officially supported:

GitLab Workflow extension for Visual Studio Code now official

Over two years ago, Fatih Acet created an extension to integrate GitLab with development in Visual Studio Code.

Fatih and more than 25 contributors continued to improve the extension with new features, and it has now been installed over 160,000 times. Fatih transferred maintainership to GitLab, and we’ll continue to improve and support this extension.

The GitLab Workflow is now officially maintained and supported by the Editor Group. We’ll be continuing to contribute features, and support the community who was actively involved in our early releases. If you have ideas or feedback, please open an issue.

See Documentation and Issue.

---

Three months later, that GitLab-Visual Studio Code integration is even more complete: See GitLab 13.6 (November 2020)

Issues and Merge Requests in VS Code

Issues are the source of truth for collaboration and what needs to be implemented. Referring back to user stories, designs, and discussions on the issue involves switching between your editor and browser. Merge Requests are the place where feedback on contributions is provided. Referencing this feedback and continuing to make changes requires this same context-switch between browser and editor.

Reducing the friction of context-switching between tools makes it more efficient to contribute changes to a project. With the 3.6.0 Release of GitLab Workflow, issues and merge requests are available directly in VS Code for easy access and collaboration. You can find issues and merge requests assigned to you or created by you and open those directly inside VS Code. This gives quick access to the information needed and the ability to respond directly to issues and merge requests via comments.

This is the first step in enabling more complete Merge Request reviews in VS Code.

See Documentation and Issue.

And, still with GitLab 13.6 (Nov. 2020):

Insert GitLab Snippets directly in VS Code

Project snippets are a place to share code fragments among your team. These snippets often contain fragments of code that are re-used in multiple places or help to bootstrap similar pages and components.

When contributing to a project, it can be important to find these snippets and insert their contents in to your working file. Finding these requires context switching out of your editor and then copy/pasting the correct information.

Using the VS Code extension GitLab Workflow v3.5.0, you can now insert snippets in to your working file, both single and multi-file snippets are supported.

See Documentation and Issue.

---

With GitLab 13.7 (December 2020), you now have:

View Merge Request changes in VS Code

When working in VS Code to review a merge request, easily referencing changes often requires checking out a branch and then trying to determine the diff between that branch and the merge target.

With the 3.7.0 Release of GitLab Workflow, merge request changes are available directly in VS Code. This provides quick access to seeing changes for merge requests in your projects.

As we continue working on bringing a complete Code Review experience to VS Code, we’ll be bringing comments on diffs to the extension next.

See Documentation and Issue.

---

GitLab 13.9 (February 2021) brings two new integrations with Visual Studio Code:

Autocomplete GitLab CI Variables in VS Code

GitLab CI is fast and highly configurable, but it can be hard to remember all the predefined environment variables, and the wrong typo can make your .gitlab-ci.yml file invalid. To make it easier to configure your GitLab CI pipeline, the 3.11.0 Release of GitLab Workflow provides auto completion for predefined environment variables when editing your .gitlab-ci.yml file.

Tooltips in the auto complete dialog provide information on what the variable can be used for as well as information on supported GitLab and Runner versions. These additional pieces of information really help to ensure your CI configuration will be valid.

Thanks to @KevSlashNull for the contribution!

See Documentation and Issue.

And (still with GitLab 13.9, February 2021):

View code review comments in VS Code

In a previous release of GitLab Workflow for VS Code it became possible for you to view merge request changes in VS Code. However, seeing the changes proposed by a merge request is only part of reviewing that change and being able to respond to feedback.

With GitLab Workflow 3.10.0, comments provided on changes are now available as part of the diff view. This greatly improves your ability to action feedback provided on your merge request directly in the editor without the additional context switch between VS Code and GitLab.

We’re continuing to expand on Code Review experiences in VS Code. Responding to comments is up next.

See Documentation and Issue.

---

See GitLab 13.10 (March 2021)

Clone project inside Visual Studio Code

When using the Visual Studio Code IDE (VS Code) you may need to work on a code repository that you don’t have on your local machine.

Before, cloning a project required several steps away from your editor:

• find the project in GitLab,
• copy its clone link,
• clone it into your local machine, and
• finally open it in VS Code.

With the GitLab Workflow extension you can now use the Git: Clone command in VS Code to do all of that without leaving your editor.

Use this command to search for projects in GitLab and clone them so you can quickly begin contributing.

Thanks Felix Haase for the contribution!

See Documentation and Issue.

---

This is now fully supported with GitLab 14.0 (June 2021):

Merge request reviews in VS Code

Merge request reviews in VS Code

As a developer, you often spend a majority of your time working in your local development environment. When you’re assigned a merge request for review, this requires you to leave your editor and perform that review inside of GitLab. While performing your review inside GitLab, you might also need to use your local editor to gain more context on the proposed changes.

GitLab Workflow version 3.21.0 for Visual Studio Code (VS Code) now supports the complete merge request review process, including threads. Select the GitLab icon in VS Code to open the sidebar to display Merge requests I’m reviewing. Select a merge request overview to view the complete details and discussions of the merge request.

The sidebar also contains a list of all the changed files in the merge request. Selecting files opens a diff comparison for you to review the changes in VS Code. While viewing the diff, you can read feedback left on the files, and create new comments by selecting a line number and creating your comment. All comments and feedback you provide in VS Code are available in the GitLab web interface, making it easy for you to perform your reviews in VS Code, and other users to participate in GitLab.

We’re really excited about bringing the complete merge request review process to you inside of VS Code. Let us know what you think by opening an issue for GitLab Workflow.

See Documentation and Epic.

Comments

[William Gustavo Marquetti]

Hi BiNZGi! I've installed GitLens like you suggested and used the git clone to import my project, but when in try to commit my changes, shows this error: > git commit --quiet --allow-empty-message --file - *** Please tell me who you are. Run git config --global user.email "[email protected]" git config --global user.name "Your Name" to set your account's default identity. Omit --global to set the identity only in this repository. fatal: unable to auto-detect email address (got 'punk@punk-PC.(none)') > git config --get-all user.name

[BiNZGi]

You have to setup git once with username and email. You can open a console and enter the commands like written in the error message and adjust to your username git config --global user.name "Your Name" and email git config --global user.email "[email protected]". The two values are used for all commits you are going to do on this computer.

[BiNZGi]

I would appreciate if you mark my answer as correct.