How to Use Cloud Shell in Visual Studio Code

Published Jun 20 2019 12:00 AM 30K Views
Microsoft

 

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.

 

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

 

Cloud-Shell-in-Visual-Studio-Code.gif

 

 

  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.

1 Comment
Occasional Visitor

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.

%3CLINGO-SUB%20id%3D%22lingo-sub-663431%22%20slang%3D%22en-US%22%3EHow%20to%20Use%20Cloud%20Shell%20in%20Visual%20Studio%20Code%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-663431%22%20slang%3D%22en-US%22%3E%3CP%3E%3C%2FP%3E%3CDIV%20class%3D%22video-embed-center%20video-embed%22%3E%3CIFRAME%20class%3D%22embedly-embed%22%20src%3D%22https%3A%2F%2Fcdn.embedly.com%2Fwidgets%2Fmedia.html%3Fsrc%3Dhttps%253A%252F%252Fwww.youtube.com%252Fembed%252F6P7kecGgrjY%253Ffeature%253Doembed%26amp%3Burl%3Dhttp%253A%252F%252Fwww.youtube.com%252Fwatch%253Fv%253D6P7kecGgrjY%26amp%3Bimage%3Dhttps%253A%252F%252Fi.ytimg.com%252Fvi%252F6P7kecGgrjY%252Fhqdefault.jpg%26amp%3Bkey%3Dfad07bfa4bd747d3bdea27e17b533c0e%26amp%3Btype%3Dtext%252Fhtml%26amp%3Bschema%3Dyoutube%22%20width%3D%22600%22%20height%3D%22337%22%20scrolling%3D%22no%22%20frameborder%3D%220%22%20allow%3D%22autoplay%3B%20fullscreen%22%20allowfullscreen%3D%22true%22%20title%3D%22Video%22%3E%3C%2FIFRAME%3E%3C%2FDIV%3E%3CP%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EAs%20you%20may%20know%2C%20I%20am%20a%20huge%20fan%20of%20the%20Azure%20Cloud%20Shell.%20I%20use%20it%20often%20directly%20in%20the%20%3CA%20href%3D%22https%3A%2F%2Fportal.azure.com%2F%3FWT.mc_id%3Ditopstalk-blog-thmaure%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3EAzure%20Portal%3C%2FA%3E%2C%20on%20Microsoft%20Docs%2C%20in%20the%20%3CA%20href%3D%22https%3A%2F%2Fazure.microsoft.com%2Fen-us%2Ffeatures%2Fazure-portal%2Fmobile-app%3FWT.mc_id%3Ditopstalk-blog-thmaure%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EAzure%20Mobile%20App%3C%2FA%3E%20or%20on%20%3CA%20href%3D%22https%3A%2F%2Fshell.azure.com%2F%3FWT.mc_id%3Ditopstalk-blog-thmaure%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3Eshell.azure.com%3C%2FA%3E.%20A%20lot%20of%20times%20I%20am%20editing%20files%20and%20writing%20code%20and%20Azure%20Resource%20Manager%20(ARM)%20templates%20in%20Visual%20Studio%20Code%20and%20in%20that%20case%20I%20need%20to%20either%20use%20a%20local%20%3CA%20href%3D%22https%3A%2F%2Fwww.thomasmaurer.ch%2F2016%2F05%2Fhow-to-install-the-azure-powershell-module%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3EAzure%20PowerShell%3C%2FA%3E%20or%20Azure%20CLI%20installation%20or%20switch%20from%20Visual%20Studio%20Code%20back%20in%20the%20browser%20to%20use%20Cloud%20Shell.%20However%2C%20there%20is%20also%20a%20third%20option%2C%20which%20allows%20me%20to%20run%20Cloud%20Shell%20directly%20within%20%3CA%20href%3D%22https%3A%2F%2Fcode.visualstudio.com%3FWT.mc_id%3Dthomasmaurer-blog-thmaure%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EVisual%20Studio%20Code%3C%2FA%3E.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ETo%20set%20up%20Cloud%20Shell%20in%20Visual%20Studio%20Code%20you%20need%20to%20do%20two%20things.%20First%2C%20you%20need%20to%20install%20nodeJS%20and%20the%20Azure%20Account%20extension.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CUL%3E%0A%3CLI%3E%3CSPAN%3EOn%20Windows%3A%20Requires%20Node.js%206%20or%20later%20to%20be%20installed%20(%3C%2FSPAN%3E%3CA%20title%3D%22https%3A%2F%2Fnodejs.org%22%20href%3D%22https%3A%2F%2Fnodejs.org%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3Ehttps%3A%2F%2Fnodejs.org%3C%2FA%3E%3CSPAN%3E).%3C%2FSPAN%3E%3C%2FLI%3E%0A%3CLI%3E%3CSPAN%3EVisual%20Studio%20Code%20%3CA%20href%3D%22https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dms-vscode.azure-account%3FWT.mc_id%3Ditopstalk-blog-thmaure%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EAzure%20Account%3C%2FA%3E%20extension.%3C%2FSPAN%3E%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CP%3E%3CSPAN%3ENext%2C%20you%20can%20log%20in%20to%20Azure%20and%20open%20PowerShell%20or%20Bash%20in%20Cloud%20Shell%3A%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20style%3D%22width%3A%20757px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F116910iDC4ED53AF11581E9%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22Cloud-Shell-in-Visual-Studio-Code.gif%22%20title%3D%22Cloud-Shell-in-Visual-Studio-Code.gif%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3COL%3E%0A%3CLI%3EPress%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSTRONG%3ECTRL%2BSHIFT%2BP%3C%2FSTRONG%3E%3C%2FLI%3E%0A%3CLI%3ESign%20in%20to%20Microsoft%20Azure%2C%20by%20typing%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSTRONG%3EAzure%3A%20Sign%20In%3C%2FSTRONG%3E%3C%2FLI%3E%0A%3CLI%3EA%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSTRONG%3Ebrowser%20window%3C%2FSTRONG%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3Ewill%20open%20to%20login%20to%20Azure%3C%2FLI%3E%0A%3CLI%3EPress%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSTRONG%3ECTRL%2B%20SHIFT%2BP%3C%2FSTRONG%3E%3C%2FLI%3E%0A%3CLI%3EType%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSTRONG%3EOpen%20PowerShell%20in%20Cloud%20Shell%3C%2FSTRONG%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3Eor%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSTRONG%3EOpen%20Bash%20in%20Cloud%20Shell%3C%2FSTRONG%3E%3C%2FLI%3E%0A%3CLI%3EThis%20will%20connect%20you%20directly%20to%20your%20Cloud%20Shell%20running%20in%20Azure.%3C%2FLI%3E%0A%3C%2FOL%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EI%20hope%20this%20gives%20you%20an%20overview%20of%20how%20you%20can%20run%20Cloud%20Shell%20directly%20in%20Visual%20Studio%20Code.%20If%20you%20have%20any%20questions%2C%20leave%20a%20comment.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-TEASER%20id%3D%22lingo-teaser-663431%22%20slang%3D%22en-US%22%3E%3CP%3EYou%20can%20run%20the%20Azure%20Cloud%20Shell%20directly%20in%20Visual%20Studio%20Code!%20and%20here%20is%20how!%3C%2FP%3E%3C%2FLINGO-TEASER%3E%3CLINGO-LABS%20id%3D%22lingo-labs-663431%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EAzure%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ECloud%20Shell%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EPowerShell%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2215344%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20Use%20Cloud%20Shell%20in%20Visual%20Studio%20Code%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2215344%22%20slang%3D%22en-US%22%3E%3CP%3EFor%20those%20that%20work%20in%20highly%20controlled%20and%20secure%20environments%20where%20you%20may%20not%20have%20admin%20rights%20on%20your%20workstation%20and%20your%20internet%20traffic%20has%20it%20TLS%20terminated%20by%20a%20nextgen%20firewall%20that%20does%20deep%20inspection%20you%20may%20need%20to%20take%20the%20additional%20steps%20to%20get%20the%20cloud%20shell%20extension%20to%20work%20in%20on%20your%20machine.%26nbsp%3B%20If%20you%20receive%20an%20error%20like%20%26nbsp%3B%3CSTRONG%3E%7B%22code%22%3A%22SELF_SIGNED_CERT_IN_CHAIN%22%7D.%26nbsp%3B%26nbsp%3B%3C%2FSTRONG%3E%26nbsp%3BThis%20means%20that%20you%20NodeJS%20install%20does%20not%20have%20the%20CA%20certs%20of%20your%20outbound%20firewall%20that%20terminates%20and%20re-signs%20all%20https%20traffic%20with%20internally%20signed%20CA%20certs.%26nbsp%3B%20if%20as%20in%20my%20case%20you%20can't%20update%20the%20ca%20certs%20for%20the%20NodeJS%20install%20because%20it%20requires%20admin%20rights%20you%20can%20follow%20the%20below%20procedure%20to%20get%20you%20rolling.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3COL%3E%3CLI%3E%26nbsp%3B%20You%20need%20to%20get%20the%20CA%20certs%20by%20which%20you%20outbound%20firewall%20uses%20to%20resign%20all%20https%20traffic.%26nbsp%3B%26nbsp%3B%3CUL%3E%3CLI%3EYou%20may%20have%20an%20intermediate%20and%20a%20root%20ca%20you%20will%20need%20to%20get%20them%20both.%3C%2FLI%3E%3CLI%3EFrom%20your%20browser%20click%20on%20the%20lock%20icon%20to%20get%20the%20certificate%20information.%3C%2FLI%3E%3CLI%3EExport%20all%20the%20CA%20certs%20in%20base64%20encoded%20format%3C%2FLI%3E%3C%2FUL%3E%3C%2FLI%3E%3CLI%3EOpen%20a%20text%20editor%20to%20a%20new%20file%20and%20place%20all%20the%20ca%20certs%20in%20the%20file%20and%20save%20the%20file%20as%20firewall_ca.pem%3C%2FLI%3E%3CLI%3EOpen%20VS%20Code%20and%20go%20to%20settings%3C%2FLI%3E%3CLI%3ESearch%20for%20environment%20variable%3C%2FLI%3E%3CLI%3EClick%20edit%20in%20settings.json%20under%20Terminal-%26gt%3BIntegrated-%26gt%3BEnv%3AWindows%3C%2FLI%3E%3CLI%3EAdd%20%22NODE_EXTRA_CA_CERTS%22%3A%20%22c%3A%2F%7Bpath%7D%2Ffirewall_ca.pem%22%3C%2FLI%3E%3CLI%3ESave%20the%20settings%3C%2FLI%3E%3CLI%3ERestart%20VS%20Code%3C%2FLI%3E%3C%2FOL%3E%3CP%3ECloud%20Shell%20should%20now%20work%20from%20VS%20Code.%26nbsp%3B%20I%20hope%20you%20find%20this%20helpful.%3C%2FP%3E%3C%2FLINGO-BODY%3E
Version history
Last update:
‎Jun 20 2019 05:02 AM
Updated by: