Introduction

This is chapter-5 of my Azure Cloud Shell Web Series and today we are discussing –

Monaco Editor which is the open source web-based editor that powers the Visual Studio Code, is now integrated in Azure Cloud Shell. This brings a Full graphical code editing experience in your browser that works almost like Visual Studio Code on you local computer. Adding more flexibility to edit you files from the browser based shell which already has a variety of text editors like vi, emacs, nano.

Video Chapter [Recommended]

If you like this video, please subscribe to my YouTube channel here which is the motivation for me to create more such videos 🙂 thank you!

Monaco Editor in Azure Cloud

Monaco Editor is an Open-Source web standard based full graphical code editor integrated now with the Azure Cloud Shell, and could be launched by simply typing code <name of the file/directory> from the cloud shell.

You can also use the ‘{ }’ button to Open editor from the cloud shell, like in the following screenshot

This browser based editor also provides a ‘File Explorer’ to seamlessly navigate, identify and explore the Azure Cloud Shell File system and the mounted Cloud Drive from your browser.

Needless to mention, but since full graphical code editing experience is incomplete without Syntax Coloring and Auto Completion, hence this is also offered as a feature to enhance the code editing feature in your web browser.

That means you can perform multi line select, edit and even launch the command palette in the browser by pressing [ F1 ] key and even perform a Find Operation



Conclusion

Now Azure Cloud Shell enables you to create script files, edit them in full code editor with rich text editing features as experienced on visual code. Once you are finished editing the file it can be easily saved for future use and reference to your cloud drive and even can be executed seamlessly all from the Azure Cloud Shell.

Following are some key pointer on new Monaco based offerings in Azure Cloud Shell-

Rich Text Editing Features Syntax Coloring, Highlighting

Auto Completion

Multi-Line edit File Explorer Command Palette Open with ‘code’

Follow @SinghPrateik