Adam Carr's Blog

Visual Studio Online - Monaco - The Browser IDE

Adam Carr -

As a long time developer, I have always had a hard time picking the right laptop for me. I want the portability and battery life given from smaller machines like the MacBook Air or any of the new "ultra books", but don't want to sacrifice the horsepower since I primarily use my laptop for development. I have dreamed of a day where I could do my development via a browser. I am usually developing some component of a website so running the code locally has never really been a requirement.

Well, the day has come where we can develop an entire website stack in the browser.

Enter Visual Studio Online - Monaco

What about Cloud9?
Ok, since I am talking about online IDEs, I must mention Cloud9 IDE. Cloud9 is a fantastic tool. It has been around for a while and in many ways is more mature than Monaco. I love the ability to configure it to point to any server I want as a backend via SSH and just do my development there. I have found the performance to be a little sluggish at times though. The biggest missing feature for me is strong support for TypeScript. They do support the syntax highlighting and you can configure grunt with grunt-typescript or grunt-ts to compile your TypeScript so it works for the most part.

Monaco
Monaco, on the other hand, is by far the best environment to develop TypeScript I have found to date. It is even better than Visual Studio (at least for now). I am sure this is primarily because the team building Monaco is doing so using TypeScript. Dogfooding is the best way to create a quality product!

How to use Monaco?

I have had several people ask me how to set this up. Naturally, you would think you could set this up after setting up a project in visualstudio.com but there doesn't seem to be a way to do so. Not yet at least. I assume this is because it is currently in preview or because you still need a backing VM and that requires an azure account.

Steps

  1. First, you need to log into the azure portal and create a new website. I don't think you can use a free website for this but not positive. NOTE: If you use shared, azure limits the resources you can use, so the IDE can stop working abruptly on you since the IDE just runs on top of your website.

  2. Fill out the desired URL in the new pane.

  3. After you have created the website. Select it, and select CONFIGURE

  4. Under the configure tab, scroll down until you see the EDIT IN VISUAL STUDIO ONLINE option. Make sure you save your changes.

  5. Click the DASHBOARD link at the top.

  6. Scroll down and you should now see Edit in Visual Studio Online option on the right of the page.

Key Features of Monaco

Here are a few key features that Monaco offers.

  • Full featured console that allow you to really take advantage of the VM. You can run npm and grunt commands right from IDE. You can even start up multiple consoles and run them side-by-side. Even enable split-view with the console next to another file. Edit in place and run grunt commands to compile|test|minify|etc. at the same time.

  • Intellisense support as you type or by hitting ctrl+space.

  • It also has the new visual studio "Peek Definition" support built in to peek at the source of the symbol you are currently working with without having to open the entire document.