microsoft
/
AzureTipsAndTricks
зеркало из
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

[Build and Deploy Staging Site] Publish from microsoft/azuretipsandtricks-private:main/src/blog

This commit is contained in:
erjuntun75 2022-05-24 06:07:54 +00:00
Родитель 49dfb55d74
Коммит d5c763f88f
1 изменённых файлов: 0 добавлений и 104 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

104
blog/tip248.md
Просмотреть файл

@ -1,104 +0,0 @@
---
type: post
title: "Tip 248 - Top 5 VS Code extensions for Azure Developers"
excerpt: "Learn about the top 5 VS Code extensions for Azure Developers"
tags: [Visual Studio Family]
share: true
date: 2020-02-23 02:00:00
---
::: tip
:fire: The Azure Developer Guide eBook is available [here](https://aka.ms/azuredevebook?WT.mc_id=docs-azuredevtips-azureappsdev).
:bulb: Learn more : [Visual Studio Code Azure Extensions](https://code.visualstudio.com/docs/azure/extensions).
:tv: Watch the video : [Top 5 VS Code extensions for Azure Developers](https://www.youtube.com/watch?v=wgzClFH3g8E&list=PLLasX02E8BPCNCK8Thcxu-Y-XcBUbhFWC&index=4&t=0s?WT.mc_id=youtube-azuredevtips-azureappsdev).
:::
### Top 5 VS Code extensions for Azure developers
#### Visual Studio Code for Azure Developers
[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-azureappsdev) before you begin)
* The latest version of [Visual Studio Code](https://code.visualstudio.com/)
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**
<img :src="$withBase('/files/44azureacount.png')">
(Azure Account extension in VS Code)
The [Azure Account](https://github.com/microsoft/vscode-azure-account?WT.mc_id=code-azuredevtips-azureappsdev) 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-azureappsdev), 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.
<img :src="$withBase('/files/44azurecommands.png')">
(Azure commands in VS Code)
**2. Azure App Service**
<img :src="$withBase('/files/44appserviceextension.png')">
(Azure App Service extension in VS Code)
The [Azure App Service extension](https://github.com/microsoft/vscode-azureappservice?WT.mc_id=code-azuredevtips-azureappsdev) is incredibly useful for developers that work with [Azure App Service](https://azure.microsoft.com/services/app-service/?WT.mc_id=azure-azuredevtips-azureappsdev). 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.
<img :src="$withBase('/files/44appserviceinaction.png')">
(Do anything with your App Service in VS Code)
**3. Azure Functions**
<img :src="$withBase('/files/44azurefunctions.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-azureappsdev). 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-azureappsdev). 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.
<img :src="$withBase('/files/44functionsinaction.png')">
(Do anything with your Azure Functions in VS Code)
**4. Azure Storage**
<img :src="$withBase('/files/44azurestorage.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-azureappsdev) accounts. You can go through your [Blob](https://azure.microsoft.com/services/storage/blobs/?WT.mc_id=azure-azuredevtips-azureappsdev), [Table](https://azure.microsoft.com/services/storage/tables/?WT.mc_id=azure-azuredevtips-azureappsdev), [Queue](https://azure.microsoft.com/services/storage/queues/?WT.mc_id=azure-azuredevtips-azureappsdev) and [File](https://azure.microsoft.com/services/storage/files/?WT.mc_id=azure-azuredevtips-azureappsdev) 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-azureappsdev) 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-azureappsdev) application and want to host that as a static website.
<img :src="$withBase('/files/44storageinaction.png')">
(Deploy to static website in VS Code)
**5. ARM Template Viewer**
<img :src="$withBase('/files/44armtemplateviewer.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-azureappsdev) 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 a 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 a 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-azureappsdev) 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-azureappsdev), a [Virtual Network](https://docs.microsoft.com/azure/virtual-network/virtual-networks-overview?WT.mc_id=docs-azuredevtips-azureappsdev) and a [public IP Address](https://docs.microsoft.com/azure/virtual-network/virtual-network-public-ip-address?WT.mc_id=docs-azuredevtips-azureappsdev). 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.
<img :src="$withBase('/files/44armtemplateviewerinaction.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)