How Building An IDE Extension Changed The Way We Ship Code
Tags: development, programming, webdev, coding
Published: 2019-05-21 23:01:16

---
title: How Building An IDE Extension Changed The Way We Ship Code
published: true
tags: development,programming,web-development,coding
canonical_url: https://bitbucket.org/blog/how-atlassian-for-vscode-changed-the-way-we-ship-code
---

When our team set out on the adventure of building the [Atlassian for VS Code extension](https://marketplace.visualstudio.com/items?itemName=Atlassian.atlascode), our mission was simple: create an MVP to test if using Bitbucket Cloud and Jira Software Cloud features inside of VS Code would make a better developer experience.

To begin, we did what we all knew: scheduled planning meetings, had daily stand-ups, setup a Slack channel for all of the discussion that happens between meetings, tried to guess at release dates and scheduled retros to discuss what went wrong and what went well.

Over time we discovered that through the use of our own tool, we tackled a notoriously difficult problem: changing developer behavior in ways that make the team more productive while easing the administrative tasks that usually slow them down.

Dogfooding our own extension has helped our team develop a better shared understanding of the code base, and integrate the non-coding tasks required for healthy project management into the dev-loop so tightly that it becomes the preferred way for developers to work.

We’ve realized that if you build tooling that’s fun to use, this will all happen organically.

### Iterating in the Dark

The thing about silos is that they’re usually dark inside.

When we first started building our VS Code extension for Bitbucket and Jira users, we were working in a very familiar style where we each went into our “coding caves” for long periods of time and every once and a while came up for air to check the Slack channel we had setup.

It was almost guaranteed that there was a message in the channel begging for someone to review a PR from an hour or two ago, if not more. Then, as any good team member, we’d stop what we were doing, open up Bitbucket and review the code in our browsers. We might add a comment here and there (to be forgotten by it’s author as soon as it was submitted), then certainly take a coffee break, and then come back to crawl into our caves again.

Rinse, Repeat. The problem was, it still felt like separate people working on separate areas of the code base without a lot of cross-functional knowledge of how things worked. We were basically in the dark.

To shed some light (pun intended) on some of the issues:

- Nobody likes sitting in a room for hours with a Jira board on the screen while somebody frantically types trying to enter Jira issues while heated discussions conversations are happening.
- Once coding commences, developers tend to only take the tasks within their comfortable domain knowledge (silos) and cross-functional learning is lost
- The lack of cross-functional code base knowledge means bugs and ideas about other parts of the code base are left up to the developer who works on it lacking collaborative input
- Developers hate context switching which in-turn means:
- bugs or features may be discovered, but new Jira issues don’t get entered for them
- pull requests are submitted, but nagging has to happen to get them reviewed
- comments may be entered on a pull request, but replies are either not followed up on or take days to get new responses
- updating Jira issues to reflect the state of the project is a chore that happens through nagging, thus leaving Jira in a state of lies
- Ensuring Jira units of work are linked to code in every branch and every commit is not consistent at best and doesn’t happen in the worst cases
- There’s less collaboration when developers feel like someone else is the expert

### Out of the Caves

One day, it happened. We had finally hit the point where we could authenticate against both Jira and Bitbucket and we had the essential features in place to start dogfooding our extension. That first developer exclaimed with triumph “Hey, I just approved that PR with our extension!” and we knew feasibility was no longer our mission…

The new roadmap, almost entirely led by engineers with little oversight and lots of dogfooding, emerged: we would take a selfish approach and focus on making our own lives easier inside of VS Code, knowing that if we got the Jira and Bitbucket experience (mostly) right, we would have a positive impact on other development teams outside of Atlassian. If we have pain points in our development cycle, chances are other teams do as well.

To illustrate some of the successes our team has enjoyed, let’s take a look at our new development practices which integrate the features of our extension to blur the lines between coding, Jira-ing and Bitbucket-ing. And what better place to start than… the middle.

### A Shared Cave with Really Nice Lighting

To illustrate some of the successes our team has enjoyed, let’s take a look at our new development practices which integrate the features of our extension to blur the lines between coding, Jira-ing and Bitbucket-ing. And what better place to start than… the middle.

#### Jira Units of Work: Never Lose Track of Discoveries

OK, let’s say I’m a developer… and I’m working on some code when I notice a bunch of comments littered with Jira issue keys. (we’ll get to why that is in a bit) It’s a bit frustrating to see the keys and a small comment but not have access to the issue details. It’s even more frustrating to hop out of my IDE to paste the key into the Jira web interface just to see the details, and so I add a little TODO comment:

```
// TODO: add a "quick view" when hovering over Jira issue keys
```

Even though there are various extensions to list/manage TODO comments, this is going to get lost if I don’t remember to bring it up at the next planning meeting, or stop what I’m doing, jump into the Jira web interface and create an issue for it.

Using the “Create Jira Issue” code link that appears for customizable comment prefixes (TODO, BUG, FIME, ISSUE, etc), I can simply click on the link, create the issue and move along with my coding.

To top it all off, the extension will update the comment and add the newly created issue key as a prefix so other developers can reference it.

```
// TODO: VSCODE-12324 - add a "quick view" when hovering over Jira issue keys
```

![](https://cdn-images-1.medium.com/max/800/0*uhoy2va6RncsmUal.gif)

#### Turning Ideas into Code: Starting Work

Let’s say there’s another developer on the team that just finished a task and is looking for something to pick up. She sees the Jira issue we made above in her Jira Issue Tree within VS Code and opens it up. After reading through the details she decides she wants to work on it.

Following our best coding practices, getting started on a new task is a little more complicated than just coding away. She needs to:

- Create a branch ensuring that the Jira issue key is in the branch name
- Link the local branch with a new upstream branch on Bitbucket
- Assign the issue to herself
- Transition the issue to an “In Progress” state so other developers and “project people” know what’s in flight
- Finally checkout the local branch and start coding

This is a small list of things that needs to be done, but after doing it a few (hundred) times, most developers tend to miss a few of these steps.

Using the “Start Work On Issue” button provided on the Jira Details screen within VS Code, this can all happen in a single step.

![](https://cdn-images-1.medium.com/max/800/0*zAtJWURQtBj3shuE.gif)

-----

**Pro Tip: Make sure all commits contain the issue key**

So what’s this about putting issue keys in branch names?

The idea is simple: if you link your Jira instance in your Bitbucket repository settings, Bitbucket will look for issue keys in your branch names and commit/PR comments and be able to link them in the Bitbucket UI, among other things.

On top of the Bitbucket UI, the Atlassian for VS Code extension checks those same places for issue keys and “magically” gives you lists of issues related to your PRs within various UIs. You can now easily get a better picture of issue/code relationships right within VS Code.

So how to you ensure every commit has a Jira issue key in the comment?

Although outside of the VS Code extension, we use a small Git script that automates the process by finding the issue key in your branch name and pre-pending it to all commit comments on that branch.

Developers never have to type in the issue key in a comment as long as the branch contains the key.

You can grab this nifty script and instructions from our [Bitbucket Snippet.](https://bitbucket.org/snippets/atlassian/qedp7d/prepare-commit-with-jira-issue)

----

So our developer feels like her feature is complete and now needs to create a pull request. This is going to serve multiple purposes:

- Her teammates will do a code review to catch anything she might have missed
- Her teammates will have the opportunity to test out the new feature
- The entire team can discuss the approach and make any changes as needed
- The team has a chance to “sign off” on the pull request by approving it
- Finally, the pull request can be merged

Let’s take this step-by-step, first by creating a pull request.

Creating a pull request traditionally meant hopping out of your IDE, navigating the Bitbucket UI, and creating the pull request. With our extension, this can now be done right within VS Code.

![](https://cdn-images-1.medium.com/max/800/0*wKAwPeyu0f0aRMZ7.gif)

A pull request has been created and now is typically when our developer takes (a much deserved) coffee break and when she gets back, checks to see if anyone’s looked at it. Usually the answer is no and so she needs to hop into Slack and gently request that her teammates take a look at the PR. Even this requires some luck that the other developers are in one of their “come up for air” moments.

In our extension we wanted to try to remove as much nagging and waiting as possible, so when she created the pull request, her teammates got a small notification popup right within VS Code and her pull request showed up in all of their “Pull Request Tree” views right within VS Code.

Now her teammates not only know that there’s something to review, but they can see the detailed summary of the pull request, see any and all Jira issues that a related to the pull request, and go through the individual file diffs right withing their IDEs.. you know, where developers like to look at code in whatever crazy theme they have decided to use that week.

As they go through the details and the diffs, they can quickly add comments on a line-by-line basis, and since developers are notified as new comments are added within VS Code, the time spent waiting for replies is greatly reduced, effectively turning pull request into a meaningful communication tool.

![](https://cdn-images-1.medium.com/max/800/0*K_jR5ZMjBuih2-wY.gif)

-----

Since using these pull request features, our team has enjoyed a huge acceleration in knowledge sharing which in-turn has help break down our silos and turn each team member into a product expert instead of an expert of a smaller domain within the code base.

We all have a deeper understanding of our entire code base and have also become a lot more collaborative simply through greater communication.

-----

Once each teammate finishes reviewing the pull request, they can simply click the approve button from the details screen within VS Code and go back to their coding. Similarly, our developer that submitted the PR can simply merge right from the details screen as well.

![](https://cdn-images-1.medium.com/max/800/0*hjFJF4wMJ0FC25pl.gif)

Once merged, it’s time for a new task. Our developer can either go through the list of issues in the tree view like before, or now she can simply hover over an issue key she’s found in the code and use the new “Issue Quick View” feature which will allow her to get essential issue details, open up the full detail view and optionally start work on the issue.

### Versioning is a Result, Not a Plan

Our team has come a long way since deciding to test out using Bitbucket and Jira features inside of VS Code. We set out to create a useful tool to help ease some of the pain points within common coding cycles. What we ended up with was exactly that. What we didn’t plan on, was that through the use of our own tool, we would organically change the way we worked.

The biggest change we’ve seen so far is that we no longer go into a room armed with a version number for the “next release”, give it a date, and pack it with things we think we can get done. Instead, we code, we discover bugs and features along the way, we are more collaborative in our development, and everyone now feels ownership in the entire code base and are eager to work on any part of it.

Where we used to do a release at some scheduled time period, we now do many more releases as useful features are completed. We don’t wait to ship anything because “1.x is supposed to release at the end of the month”. In fact, we only have a single version we ever work towards and it’s label is vNext. At any point in time, we can say “it’s time.” and then minutes later we release and assign that snapshot in time an appropriate label.

### When there’s no deadline, you’re never done

Our team is moving faster than ever and we’ve already see vast improvements to our coding cycles.

By no means is our extension a “silver bullet” and as they say “results may vary”. Our team is passionate (and selfish) about continuously finding ways to use new tooling and new workflows to make every team the best they can be.

We’re excited to learn how teams outside of Atlassian make use of these features and how we can improve.

[Install the extension today](https://marketplace.visualstudio.com/items?itemName=Atlassian.atlascode) and let us know what you think!

_Written by Jonathan Doklovic: Jonathan has been working at Atlassian for almost a decade and is currently a Principal Developer on the Product Integrations team. He has worked on many Atlassian products as well as the core plugin system and Atlassian Connect._

_Originally published at_ [_https://bitbucket.org_](https://bitbucket.org/blog/how-atlassian-for-vscode-changed-the-way-we-ship-code) _on May 15, 2019._

* * *