A VS Code extension for GitLab: GitLab Workflow

Fatih Acet ·
Mar 1, 2018 · 3 min read · Leave a comment

We recently did a survey within the Frontend team to see which tools we were using and how we were using them, in order to learn from one another and to build better workflows. Through this survey, we determined that VS Code is the most used IDE within the team. This led to the idea for a GitLab extension for VS Code that could help boost productivity.

Update: Read about how GitLab + VS Code can be used for extension development.

This is not a GitLab feature (we're actually working on building our own integrated web IDE), but the extension is a quick and easy way to perform a lot of useful actions you would usually visit GitLab.com to do, directly within VS Code. Watch the demo below and read on for more about how I developed the extension.


First iteration of GitLab Workflow

This was my first attempt at writing a VS Code extension, and I wanted to build something simple as a first iteration. I built an extension that allowed users to see issues and merge requests assigned to them on GitLab.com. The detailed documentation and powerful APIs of VS Code enabled me to build my first version in less than two hours! It was an enjoyable experience.

Further iterations

This led to the creation of my second iteration: showing MR URLs, providing the pipeline status on the status bar, opening the current file and current MR on GitLab.com. I shared this second iteration with my fellow GitLab team-members on our internal Slack and received a lot of positive feedback. After that, I released new iterations and it got more than 5,000 installations in just a month. It was so well received that it was featured on the "Trending this week" section of Visual Studio Marketplace and is still currently being featured on the "Trending this month" section 🎉

GitLab Workflow on Visual Studio Marketplace

The current version of this extension allows you to:

See below for more tasks you can perform quickly with the extension.

GitLab Workflow Commands

You can find the source code here and see the extension on marketplace. You can read the documentation here and check the CHANGELOG here. There is also a Product Hunt page for the extension.

Photo by Iker Urteaga on Unsplash

“A @code extension for @GitLab: GitLab Workflow” – Fatih Acet

Click to tweet

Open in Web IDE View source