A VS Code 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 development workflows. Through this survey, we determined that Visual Studio Code (VS Code) is the most used integrated development environment (IDE) within the team. This led to the idea for a GitLab extension for VS Code that could help reduce context switching and boost productivity.

Update: Read eight tips for using the GitLab VS Code extension and 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 your VS Code editor. 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 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 🎉

{: .shadow}

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.
• Issue and MR search including simple and advanced search. Read more.
• View an MR and close an issue on GitLab with a single click from your status bar.
• View an active file on GitLab with highlighting active line number and selected text block. Read more.
• Create public, internal or private snippet from entire file or selection. Read more.
• Compare your branch with master and view changes on GitLab. Read more.
• Validate GitLab CI configuration file .gitlab-ci.yml. Read more.

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

{: .shadow}

You can find the source code here and see the extension on the Visual Studio 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