How to Use Cloud Shell in Visual Studio Code

[thomasmaurer]

As you may know, I am a huge fan of the Azure Cloud Shell. I use it often directly in the Azure Portal, on Microsoft Docs, in the Azure Mobile App or on shell.azure.com. A lot of times I am editing files and writing code and Azure Resource Manager (ARM) templates in Visual Studio Code and in that case I need to either use a local Azure PowerShell or Azure CLI installation or switch from Visual Studio Code back in the browser to use Cloud Shell. However, there is also a third option, which allows me to run Cloud Shell directly within Visual Studio Code.

To set up Cloud Shell in Visual Studio Code you need to do two things. First, you need to install nodeJS and the Azure Account extension.

• On Windows: Requires Node.js 6 or later to be installed (https://nodejs.org).
• Visual Studio Code Azure Account extension.

Next, you can log in to Azure and open PowerShell or Bash in Cloud Shell:

1. Press CTRL+SHIFT+P
2. Sign in to Microsoft Azure, by typing Azure: Sign In
3. A browser window will open to login to Azure
4. Press CTRL+ SHIFT+P
5. Type Open PowerShell in Cloud Shell or Open Bash in Cloud Shell
6. This will connect you directly to your Cloud Shell running in Azure.

I hope this gives you an overview of how you can run Cloud Shell directly in Visual Studio Code. If you have any questions, leave a comment.

[Rob_Reilly]

For those that work in highly controlled and secure environments where you may not have admin rights on your workstation and your internet traffic has it TLS terminated by a nextgen firewall that does deep inspection you may need to take the additional steps to get the cloud shell extension to work in on your machine.  If you receive an error like  {"code":"SELF_SIGNED_CERT_IN_CHAIN"}.   This means that you NodeJS install does not have the CA certs of your outbound firewall that terminates and re-signs all https traffic with internally signed CA certs.  if as in my case you can't update the ca certs for the NodeJS install because it requires admin rights you can follow the below procedure to get you rolling.

1.   You need to get the CA certs by which you outbound firewall uses to resign all https traffic.  
   • You may have an intermediate and a root ca you will need to get them both.
   • From your browser click on the lock icon to get the certificate information.
   • Export all the CA certs in base64 encoded format
2. Open a text editor to a new file and place all the ca certs in the file and save the file as firewall_ca.pem
3. Open VS Code and go to settings
4. Search for environment variable
5. Click edit in settings.json under Terminal->Integrated->Env:Windows
6. Add "NODE_EXTRA_CA_CERTS": "c:/{path}/firewall_ca.pem"
7. Save the settings
8. Restart VS Code

Cloud Shell should now work from VS Code.  I hope you find this helpful.

[seahi450]

Is there any way to use the local VS Code editor to edit files in the Cloud Shell?

[thomasmaurer]

@seahi450 yes, in this scenario VS Code is running locally and opens files in Cloud Shell.

best regards

Thomas

[seahi450]

Hi Thomas,

It's clear that the terminal is operating on the cloud shell filesystem. But I want to open a file from the cloud shell in the VS Code editor. Is that possible?

[FernandoSibaja]

Hello @thomasmaurer . Great article.

I am trying to open folders or files in the cloud shell by using the code command.

The terminal accepts the command but nothing happens in code, the file is not open or the folder is not added to folder explorer.

I'm using vscode v1.64.2  and the Azure account extension  v0.10.0.

[FernandoSibaja]

Hello @thomasmaurer . Great article.

I am trying to open folders or files in the cloud shell by using the code command.

The terminal accepts the command but nothing happens in code, the file is not open or the folder is not added to folder explorer.

I'm using vscode v1.64.2  and the Azure account extension  v0.10.0.

[ebc_conscia]

Hi guys asking about file share access...

The trick is to add the storage from the Cloud Shell in the VS Code File Explorer.

1. Ctrl+Shift+P

2. Azure Storage: Open in File Explorer...

3. Select your subscription

4. Select the storage account used by your Cloud Shell

Note that the default folder is called clouddrive

Now save the workspace and you can create and delete files like you're working on a local machine. You can add multiple storage accounts to VS Code this way. It's essential, really or else it doesn't matter much to add the Cloud Shell to VS Code in the first place.

Hope it helps!

@thomasmaurer @seahi450 @FernandoSibaja 

[FernandoSibaja]

@ebc_conscia  Thanks!!!, you were right. 

Just to be clear, if someone comes later. To see the stuff you save directly in the file share you need to look into ~/clouddrive/.cloudconsole/

More info here: Persist files in Azure Cloud Shell | Microsoft Docs

[ebc_conscia]

@FernandoSibaja 

I came to the conclusion that it's easier to just install the Azure CLI on Windows and WSL (How to install the Azure CLI | Microsoft Docs). I don't like the Cloud Shell integration from VS Code directly, it is super unstable and requires node.js. Also if you have MFA enabled it's a pain. New error message every day from my experience.

You can only open code with the 

code .

command if you're opening the Cloud Shell from portal.azure.com. There's a very simple version of VS Code there. (see How to edit files in Azure Cloud Shell (microsoft.com))