My Top 5 Visual Studio Code extensions for Azure Developers
Tags: vscode, azure, extensions
Published: 2020-03-16 12:00:20

---
title: My Top 5 Visual Studio Code extensions for Azure Developers
published: true
description: Learn about the top 5 VS Code extensions for Azure Developers
tags: vscode, azure, extensions
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/emppnfu08ara7avzqryq.png
---

[Visual Studio Code](https://code.visualstudio.com/) (VS Code) is a lightweight code editor that works great for developing applications for any programming language. It is fast, it updates regularly and it is completely free! And you can extend its behavior by installing extensions. There are lots of extensions available, including [extensions for Azure](https://code.visualstudio.com/docs/azure/extensions).

In this post, we'll explore the top 5 VS Code extensions for Azure developers.

#### Prerequisites

If you want to follow along, you'll need the following:
* An Azure subscription (If you don't have an Azure subscription, create a [free account](https://azure.microsoft.com/free/?WT.mc_id=azure-azuredevtips-micrum) before you begin)
* The latest version of [Visual Studio Code](https://code.visualstudio.com/)

#### Top 5 VS Code extensions for Azure developers

Installing an extension in VS Code is simple. Just click the extensions menu, search for the extension and click install on it.

Let's take a look at the top 5 Azure extensions for VS Code:

**1: Azure Account**

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

(Azure Account extension in VS Code)

The [Azure Account](https://github.com/microsoft/vscode-azure-account?WT.mc_id=code-azuredevtips-micrum) extension has the least functionality of the extensions in the list, but you need it to work with the other extensions. You can use it to sign in and out of your Azure account and do things like select an Azure subscription. On top of that, the Azure Account extension also enables you to use the [Azure Cloud Shell](https://azure.microsoft.com/features/cloud-shell/?WT.mc_id=azure-azuredevtips-micrum), straight from the VS Code terminal. Just open the command palette (View > Command Palette...) and type **Azure** to see the commands to open the cloud shell. 

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

(Azure commands in VS Code)

**2. Azure App Service**

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

(Azure App Service extension in VS Code)

The [Azure App Service extension](https://github.com/microsoft/vscode-azureappservice?WT.mc_id=code-azuredevtips-micrum) is incredibly useful for developers that work with [Azure App Service](https://azure.microsoft.com/services/app-service/?WT.mc_id=azure-azuredevtips-micrum). Once you have installed the extension, you'll see an Azure menu in the menu bar of VS Code. Most other Azure extensions will show up in this same menu. From here, you can explore your Azure subscription and see all of the App Services that you have. You can even create a new one from here or deploy the app that you are working on to an App Service. This extension allows you to do almost anything that you need to do with your App Service. This includes starting and stopping it, streaming logs, remote debugging, manage app settings, see all the files in the app service and more. This is an essential extension.

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

(Do anything with your App Service in VS Code)

**3. Azure Functions**

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

(Azure Functions extension in VS Code)

Another extension is the [Azure Functions extension](https://github.com/microsoft/vscode-azurefunctions?WT.mc_id=code-azuredevtips-micrum). This is similar to the App Service extension and it shows up in the Azure menu of VS Code. You use the Azure Functions extension to manage your [Azure Functions](https://azure.microsoft.com/services/functions/?WT.mc_id=azure-azuredevtips-micrum). You can use it to manage your existing Functions and to create new ones and deploy your app to a Function in the cloud. All from VS Code. You can start and stop Function Apps, manage their app settings, redeploy previous deployments, see the properties of bindings and more. If you use Azure Functions, you need this extension. 

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

(Do anything with your Azure Functions in VS Code)

**4. Azure Storage**

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

(Azure Storage extension in VS Code)

A very useful VS Code extension is the [Azure Storage extension](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurestorage). When you've installed it, this will also show up in the Azure menu of VS Code. The Azure Storage extension lets you manage your [Azure Storage](https://azure.microsoft.com/services/storage/?WT.mc_id=azure-azuredevtips-micrum) accounts. You can go through your [Blob](https://azure.microsoft.com/services/storage/blobs/?WT.mc_id=azure-azuredevtips-micrum), [Table](https://azure.microsoft.com/services/storage/tables/?WT.mc_id=azure-azuredevtips-micrum), [Queue](https://azure.microsoft.com/services/storage/queues/?WT.mc_id=azure-azuredevtips-micrum) and [File](https://azure.microsoft.com/services/storage/files/?WT.mc_id=azure-azuredevtips-micrum) Storage and do most things that you need with them. You can upload data, create and delete blob containers and much more. And, you can also use this extension to manage the [Blob Storage Static Website](https://docs.microsoft.com/azure/storage/blobs/storage-blob-static-website?WT.mc_id=docs-azuredevtips-micrum) feature. With the extension, you can configure this feature and deploy your app to a static website in Blob Storage. That is incredible and very useful if, for instance, you are developing a [Blazor WebAssembly](https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor?WT.mc_id=microsoft-azuredevtips-micrum) application and want to host that as a static website. 

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

(Deploy to static website in VS Code)

**5. ARM Template Visualizer**

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

(ARM Template Visualizer extension in VS Code)

The final extension that we will cover is the [ARM Template Visualizer](https://marketplace.visualstudio.com/items?itemName=ytechie.armviz). This will render a visual representation of [ARM templates](https://docs.microsoft.com/azure/azure-resource-manager/resource-group-authoring-templates?WT.mc_id=docs-azuredevtips-micrum) that you are working on in VS Code. Having a visual overview of your template can be very useful as ARM templates tend to become difficult to oversee. Once you have installed the template, you can use it when you have an ARM template open by going to the Command Palette (View > Command Palette...) and typing in ARM Template Visualizer. This will render a visual representation like in the image below. What you see below is the representation of a template that creates a [Virtual Machine](https://azure.microsoft.com/services/virtual-machines/?WT.mc_id=azure-azuredevtips-micrum) in Azure. This creates many sub-services, like a [virtual network card](https://docs.microsoft.com/azure/virtual-network/virtual-network-network-interface-vm?WT.mc_id=docs-azuredevtips-micrum), a [Virtual Network](https://docs.microsoft.com/azure/virtual-network/virtual-networks-overview?WT.mc_id=docs-azuredevtips-micrum) and a [public IP Address](https://docs.microsoft.com/azure/virtual-network/virtual-network-public-ip-address?WT.mc_id=docs-azuredevtips-micrum). The extension will also show any relationships between the resources in a template. 

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

(ARM Template Visualizer in action in VS Code)

**6. BONUS ARM Template Viewer**

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

(ARM Template Viewer extension in VS Code)

The final extension that we will cover is the [ARM Template Viewer](https://marketplace.visualstudio.com/items?itemName=bencoleman.armview). This will render a visual representation of [ARM templates](https://docs.microsoft.com/azure/azure-resource-manager/resource-group-authoring-templates?WT.mc_id=docs-azuredevtips-micrum) that you are working on in VS Code. Having a visual overview of your template can be very useful as ARM templates tend to become difficult to oversee. Once you have installed the template, you can use it when you have an ARM template open by clicking on the eye symbol that will now appear in the top right of the editor bar, or you can go to the Command Palette (View > Command Palette...) and type in ARM Viewer. (Fans of shortcuts can use `Ctrl`+`Alt`+`Q`.) This will render a visual representation of the resources in the template and their relationships.  What you see below is the representation of the [101-vm-simple-windows](https://github.com/Azure/azure-quickstart-templates/tree/c25f946e2d45c3671d31b147129c7652f52a6d3e/101-vm-simple-windows) template that creates a [Virtual Machine](https://azure.microsoft.com/services/virtual-machines/?WT.mc_id=azure-azuredevtips-micrum) in Azure. This creates many sub-services, like a [virtual network card](https://docs.microsoft.com/azure/virtual-network/virtual-network-network-interface-vm?WT.mc_id=docs-azuredevtips-micrum), a [Virtual Network](https://docs.microsoft.com/azure/virtual-network/virtual-networks-overview?WT.mc_id=docs-azuredevtips-micrum) and a [public IP Address](https://docs.microsoft.com/azure/virtual-network/virtual-network-public-ip-address?WT.mc_id=docs-azuredevtips-micrum). The extension was tested against over 900 templates in the [Azure Quickstart Templates repository](https://aka.ms/armtemplates) The extension allows you to toggle between resource type and name, change the layout by dragging the icons around, drill into a little more detail on the resources and export the final result to png files.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/34fjobe5qumrfs6h7fb3.png)
(ARM Template Viewer in action in VS Code)

#### Conclusion

There are many [Azure extensions](https://code.visualstudio.com/docs/azure/extensions) for [Visual Studio Code](https://code.visualstudio.com/). Each of them helps you to become a more productive Azure developer when you work in VS Code. Go and check them out!

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)