Visual Studio code editor: Eight tips for using GitLab VS Code

May 20, 2021 · 6 min read · Leave a comment
Tomas Vik GitLab profile

As a software engineer, I spend a significant portion of my day in the Visual Studio code editor. Since I started maintaining the officially supported GitLab VS Code extension, I've developed a few tricks that make me a productive GitLab user. Below, I share eight tips that make my work more efficient and productive, while also introducing you to some of the GitLab contributors who made this tooling happen.

1. Clone GitLab project

GitLab contributor Felix Haase recently implemented a feature that lets you clone any GitLab project where you are a member. To clone the project, use the official Git: Clone command and select your GitLab instance. Use the Git: Clone command by selecting the command from the Command Palette.

This feature can save you time if you already know the name of the project you want to clone.

VS Code clone dialogue VS Code lets you filter which project to clone.

2. View MRs and issues

It is easy to look through issues and MRs that you created, are assigned to, or are reviewing using GitLab. The lesser-known feature of the GitLab Workflow extension is custom queries. Custom queries allow you to refine the search expressions for issues and MRs that appear in the VS Code side panel. You can apply all criteria you are used to from the GitLab web search: Labels, full-text search expression, milestones, authors, assignees, and more.

GitLab extension sidebar See your issues and MRs in the VS Code sidebar.

Another option is reviewing the MRs in VS Code. The final functionality that is missing in MR review is creating new comments on the MR diff, which we plan to ship by July 2021.

3. Create an MR with two clicks

If you use the git command in a terminal, you might have noticed that pushing your branch to GitLab produces the following output:

remote: To create a merge request for my-new-branch, visit:

After clicking the link, the terminal will open your browser on a new MR page where you can create an MR from the branch you just pushed.

When I started pushing my branches through VS Code, I missed this feature. To the point that I searched through the VS Code Git Extension logs to find the create MR link (command Git: Show Git Output).

Luckily, GitLab contributor Jonas Tobias Hopusch implemented a status bar button that lets you create MRs just as easily.

To create an MR from your changes, push them to your remote (the cloud icon next to the branch name) and then click on the GitLab: Create MR. button.

VS Code status bar VS Code status bar with buttons from GitLab extension.

4. Configure your GitLab CI

The GitLab extension helps you edit your .gitlab-ci.yml file in two ways: Autocompleting environment variables and validating the configuration.

Thanks to Kev's fantastic contribution, you can use CI variable autocompletion anywhere in your .gitlab-ci.yml. The hints even include variable descriptions and explain supported GitLab versions.

CI variables autocomlete dialogue CI variables autocomlete dialogue.

When you finish writing your .gitlab-ci.yml CI configuration, you can use the GitLab: Validate GitLab CI config command to surface any problems before committing the CI config to your repository.

5. Create and paste project snippets

Is there a piece of text that you and your teammates often use? Maybe it is a license header for a file or a test scenario template. You can use GitLab snippets in combination with Visual studio code editor to save you a few keystrokes.

For example, you can create a test file snippet with the GitLab: Create snippet command and then paste it into every new test file you create with the GitLab: Insert snippet command.

Paste Snippet dialogue Paste Snippet dialogue.

I mostly use snippets when I want to share a big blob of text. I select the text and then create the snippet with the GitLab: Create snippet command.

6. Copy web URL for a project file

Most of the communication at GitLab happens asynchronously. So instead of being able to show your colleague an open file in your editor, you'll need to be able to create a textual pointer to the file.

A straightforward way to do that is to use the GitLab: Copy link to active file on GitLab command, which will copy the web URL of the open file into your clipboard. It even includes the line number or a range of lines based on your cursor or selection in the Visual studio code editor.

You might also consider using the GitLens: Copy Remote File URL, which even includes the commit SHA in the URL, making it a permalink. The permalink will always point to the same version of the file regardless of further commits to your branch. We'll look at the GitLens extension in tip number 7:

How GitLens simplifies working with VS Code editor

Up until now, the tips were centered around the GitLab Workflow extension, but there is a fantastic extension that's improving VS Code git integration regardless of where you host your repository: GitLens.

7. Walking file history

GitLens makes it easy to browse the history of changes to the current file. Each versioned file will have three new editor icons, which provides quick access to all previous revisions of the file. The middle button seen in the image below provides series of actions on the current version (e.g., opening the commit in GitLab web).

GitLens history browsing buttons GitLens history browsing buttons

8. Compare current HEAD against branch or tag

One of my habits was inspecting git diff between my feature branch and the main branch before creating an MR. More often than not, I forgot to write a test or remove some pesky console.log().

GitLens adds multiple sections to your "Source Control" tab. For each branch, tag, and commit, click a "Compare" icon which will show you changes between your current HEAD and the reference. Seeing the local diff is great for previewing changes before pushing the new branch to the remote.

GitLens - compare with branch How to compare with a branch using GitLens.

Everyone can contribute

We are adding new features and fixes to the GitLab Visual Studio Code editor extension every month. If you find any issues or have a feature request, please go to our GitLab VSCode issues tracker and if your request isn't already present in the tracker, create one. Everyone can contribute to GitLab, and we welcome your ideas on how to improve our Visual Studio Code editor.

Read more on Visual Studio and GitLab:

“Tips to increase your @GitLab efficiency when working in @code” – Tomas Vik

Click to tweet

Free eBook: Version control best practices

Collaboration made easy: Learn how teams ship and solve problems with a single application for source code and other assets.

Download now
Git is a trademark of Software Freedom Conservancy and our use of 'GitLab' is under license