Introducing “GCP Project Switcher” Extension for VS Code — My Weekend Project
Tags: vscode, googlecloud, gcp, gcloud
Published: 2022-03-18 15:21:21

Writing, debugging and deploying from **Visual Studio Code** for **Google Cloud Platform** is working out great as you have multiple options to interact with **Google Cloud** products:

- the Terminal pane, to use the [gcloud](https://cloud.google.com/sdk/docs/quickstart) command-line tool
- by using [VSCode Tasks](https://code.visualstudio.com/docs/editor/tasks) to automate commands [[my setup](https://gist.github.com/pentium10/b5c260f060dcdbe8a9882189bf59f9e7)]
- [Cloud Code](https://cloud.google.com/code) toolbox

All these work based on the **project **that your environment is setup.

> _However, the VS Code screen was missing key info: **displaying the current project**. There was no easy way to switch projects from the IDE. Until now!_

Introducing the “[GCP Project Switcher](https://marketplace.visualstudio.com/items?itemName=pentium10.vscode-gcp-project-switcher)” extension for VS Code.


![“GCP Project Switcher” extension for VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lt8ey2xin47a9yu606xw.png)

## A weekend project with Typescript


So, this weekend, I had some free time as it was without any conference speaking opportunity which I usually do. The weekend turned out to be productive as I was able to release the extension after two days of small work. Also, I share a secret, this is my first project written in Typescript that got into “production”. It was a nice way to learn how Typescript works, compiles and runs.

> _Developers love to see on which Git **branch** are. I always was fascinated by how these are smartly applied to **shell’s**, **screen** and **tmux** instances on Linux systems._

Turns out on VS Code you are able to create your own extension that would add functionality to almost any section of the IDE, but  my interest was for the status bar.

The [GCP Project Switcher](https://marketplace.visualstudio.com/items?itemName=pentium10.vscode-gcp-project-switcher) extension creates a status bar item. It uses the `gcloud` tool to obtain the current project, and it’s refreshed in the background so external changes are handled.


![VSCode status bar with GCP Project Switcher Extension installed.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yfiif0gewomq7oklhjvx.png)

When clicking the status bar item a _quick pick pane_ opens, and you are able to _search_ either by project name or by ID. In order for the pane to be fast — as pulling projects list has a latency — all the polling is done in the background and it’s cached.

Suppose there is a new project that is not on the list, there is a **refresh** icon to force polling the projects lists. This helps to get started quickly on newly created projects.


![Google Cloud Platform Project Switcher pane](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/99iefj1oe9zv1meaa1y9.png)

> _**Limitations**: the `gcloud` utility must be available in your **PATH**, as the extension is using that to poll and switch the project on your environment. I plan to add a configuration option to customize the path of the gcloud tool for those who don’t have it globally available in the PATH._

Future work is already planned, I want to maintain a list of “recent” used projects, and populate the list with the recent projects at the top.

Grab the extension either from VS Code Extensions pane, or from [Marketplace](https://marketplace.visualstudio.com/items?itemName=pentium10.vscode-gcp-project-switcher). Also you can post a Review and Rating in the Marketplace.

The extension is open-source, you can contribute via [Github](https://github.com/pentium10/vscode-gcp-project-switcher).

**Bonus**: A sample [.vscode/tasks.json](https://gist.github.com/pentium10/b5c260f060dcdbe8a9882189bf59f9e7) definition to deploy a Cloud Workflow, the Quick Run pane extensions is [here](https://marketplace.visualstudio.com/items?itemName=davehart.quick-run-panel).


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ev0n4q5qo7qg5v5h6egf.png)