Colorful Git Prompt for Azure Cloud Shell and Visual Studio Code
Tags: git, productivity, bash, azure
Published: 2020-02-03 16:54:42

---
title: Colorful Git Prompt for Azure Cloud Shell and Visual Studio Code
published: true
description: A brand new Git prompt for Azure Cloud Shell
tags: git, productivity, Bash, Azure
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/i6iuuo6eobby8ardt85q.png
---

In this tutorial, we aim to bring life to our boring old Azure Cloud Shell by adding a colorful Git prompt. Kinda like this one!

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/1h69715zxwhccfmwf7g8.PNG)

I have another post in which we style PowerShell and WSL (Bash) that is located here: 

{% link https://dev.to/mbcrump/windows-git-prompt-for-wsl-bash-and-powershell-7m9 %}

> For those new to Azure Cloud Shell? Azure Cloud Shell is a browser-based shell experience to manage and develop Azure resources.

## Let's do this!

0.) [Open Azure Cloud Shell](https://shell.azure.com/) and select Bash. 

1.) Notice that [Git](https://git-scm.com/download/) is already installed, so you can type `git` from the Bash prompt.

2.) Notice also that [GoLang](https://golang.org/) is also installed, so you can type `go` from the Bash prompt.

```text
Go is a tool for managing Go source code.

Usage:

        go command [arguments]
        ...
```

Kind of cool isn't it? So why am I asking you to type `git` and `go` and the reason for that is because we'll be using both of these to setup our colorful Git prompts.

3.) We need to add **Powerline** for a beautiful and useful low-latency prompt for your shell, written in go.

```bash
go get -u github.com/justjanne/powerline-go
```

4.) Edit `~/.bashrc` with VS Code or Nano (ex. code ~/.bashrc or nano ~/.bashrc) and add the following information ([source](https://github.com/justjanne/powerline-go#bash)

```go
GOPATH=$HOME/go
function _update_ps1() {
    PS1="$($GOPATH/bin/powerline-go -error $?)"
}
if [ "$TERM" != "linux" ] && [ -f "$GOPATH/bin/powerline-go" ]; then
    PROMPT_COMMAND="_update_ps1; $PROMPT_COMMAND"
fi
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4vnr8dl1q4k1u3kuyv6v.png)

5.) Install a compatible [Font](https://github.com/adam7/delugia-code/releases) for your browser.

6.) Open up your Browser's font settings [For Chrome](chrome://settings/fonts), and change the **Fixed Width Font** line to the font we used installed.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3koa1vm30ng7mguf5xh1.png)

Restart the browser and head back over to Azure Cloud Shell and navigate inside of a repository and you should see the new colorful Git prompt!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lkily5d2tnrph9lcpbfv.png)

## BONUS: Visual Studio Code Integration

0.) Add the [Azure Account Extension](https://github.com/microsoft/vscode-azure-account) or search from VS Code to install it easily.

1.) Log in to Azure (it will open a new web browser) 

2.) Click the Settings (Gear icon) at the bottom of Visual Studio Code and click Settings again and add the font to your **Editor: Font Family** 

```text
Menlo, Monaco, 'Courier New', monospace, Delugia Nerd Font
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/b0owtylntgzyqi1f7lm4.png)

3.) Open the command palette and type `Azure: Open Bash in Cloud Shell`. This will connect you to your Cloud Shell instance running in Azure and you should see your new colorful Git prompt.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/89fxynalp2vs5xbefria.png)

Finished!

Did you like this? I streamed this live on [Twitch](https://twitch.tv/mbcrump). Follow me for upcoming developer streams. 

## Stream Replay

- [Watch on Twitch and follow for more live-coding sessions](https://www.twitch.tv/videos/540785896) Available for 60 days

Stay connected with me on various social platforms for daily software development news.

- [Twitter](https://twitter.com/intent/follow?screen_name=mbcrump) | [Twitch](https://twitch.tv/mbcrump) | [Instagram](https://instagram.com/mbcrump) | [YouTube](https://youtube.com/mbcrump) | [GitHub](https://github.com/mbcrump) | [Website](https://www.michaelcrump.net)