A VSCode extension for GitLab: GitLab Workflow

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 VSCode is the most used IDE within the team. This led to the idea for a GitLab extension for VSCode that could help boost productivity.

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 VSCode. Watch the demo below and read on for more about how I developed the extension.

Demo

First iteration of GitLab Workflow

This was my first attempt at writing a VSCode 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 VSCode 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 GitLabbers 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 🎉

The current version of this extension allows you to:

See pipeline status, open MR and close issue links in the status bar. Read more.

Automatically update pipeline status on the status bar so you don't need to open GitLab to see your pipeline status.

Advanced pipeline actions allow you to view a pipeline on GitLab, create a new pipeline, and retry or cancel current pipeline. Read more.