A look at the new Visual Studio Online “Monaco” code editor

Spread the love

One of the most interesting announcements at the Visual Studio 2013 Launch today was the Monaco editor in Visual Studio Online. I’ve seen little hints of this coming – for example, Scott Hanselman’s post in August: Now I’m dropping in a standard .gitignore and initializing the repo, then pushing to GitHub.
git init
git add .
git commit -m “Initial commit”
git remote add github https://github.com/jongalloway/PlayingWithMonacoEditor.git
git push -u github master

Now I’m going to create a new Windows Azure Web Site using that GitHub repo as the source. This has been available for a long time, but I’m showing the steps in case it’s new to you.

Step 2: Set up for editing using Visual Studio Online

Okay, we’ve got a live repo and the site’s deployed. Now we want to edit that source using Visual Studio Online.

Here’s the trick I learned from David Ebbo – you want to create another Windows Azure Web Site that’s just associated with the source, not the deployment. So I head back into the portal and create a new Web Site just for source editing.

Oops, I created it in Western Europe. Good thing the internets are fast.

Now, in the new site, I head over to the Configure tab and enable “Edit in Visual Studio Online”.

Can you feel it? We’re almost there. Promise.

Now I head over to the Dashboard tab, and click on the Edit in Visual Studio Online link. Like you, I can hardly contain my excitement! What will happen?

Oh, a login prompt. Hmm.

Fortunately, I know my username and password. If you forget, you can reset your password in the portal, on the Dashboard tab. Okay, with that done, here’s what we get:

Hooray! Yeah, science!

Step 3: Appeal to the hipster demographic

Wait, you’re not impressed because I used IE, is that it? You wanted me to see if it worked in another browser?

Yeah, maybe this is an opportunity to dust off that Mac Mini to see how it does there. Hold on, it’s over here somewhere. Under the… oh, that bill’s overdue. Hm. Behind the… oh, there it is. Okay!

So I log back in to the Azure portal on click that same Edit In Visual Studio Online link. Hey, there it is again! I’ll show this screenshot bigger this time.

Step 4: Clone the repo

Now I click on the git icon on the left side and enter my git url, then hit clone.

And here it goes…

Okay, that looks really cool, and my code’s visible on the left. Before I start editing, I want to make sure I can build it. In the console window, I’m going to type in “msbuild” and cross my fingers.

Well, we couldn’t expect it to work on the first shot, could we? I…

Oh, it did work. Well, hey there.

So, back on my Windows box, here’s what the site looks like in IE11.

Step 5: Do some editing. That’s what started this whole mess, remember?

I’m going to head back over to the Mac and edit some code. To make this interesting, I’m going to edit C#, CSHTML, CSS and JavaScript. What could go wrong?

First I edit the HomeController to add something to the ViewBag.

Next I edit the CSHTML, adding in some HTML and C# changes.

Finally, I make some CSS edits.

I’m kind of rushing through this, but there’s code completion and IntelliSense all along the way. For instance, when I start editing a CSS color, I get a dropdown with available colors.

When I select a color, I can see what it will look like in the editor.

Now I build to make sure it’s all still good.

Step 6: Deploy

And git push to deploy.

Step 7: Full circle, with a pirouette and a lemon twist

And hopping back to my Windows / IE 11 browser, we can see that it works.

What’s the point?

Why did we do this? What did it buy us?

Well, for one thing, we grabbed an ASP.NET repo from GitHub in a browser, on a Mac, made some code changes, and deployed it. If you’ve got a browser (free) and a Windows Azure account (free), you can edit and deploy an ASP.NET site. You could do it on an Android tablet, on an iPad, in a boat, with a goat.

Even if you’re on Windows, note that the Visual Studio Online experience didn’t require me to sign up for or pay anything. Visual Studio Online is free for projects with five or fewer users, and didn’t make me jump through any hoops to get going. That means you can get started using it. If you want more Visual Studio Online or Windows Azure services, you can get them, but there’s no roadblock to creating / editing / deploying / maintaining a site right now.

Oh, and this was ASP.NET MVC 5 – so, all the new stuff works out of the box. Yes, you’d expect that, but it’s worth pointing out.

Recap and regrets

Yes, we’ve arrived. We deployed code to GitHub, pulled it into a Windows Azure Web Site, edited it in a browser, on a Mac (demo bingo, everyone drink), and saw it automatically deployed and running in a browser. Neat.

What I didn’t have time to show you was all the cool features in the Monaco editor.

For instance, you can click on the settings gear in the upper right corner and switch to the Visual Studio dark theme, which is so much cooler.

I regret that we didn’t have time to look at all of the cool editor features, like the editor commands shown when you hit ctrl+E.

I wish we’d had time to look at the fancy IntelliSense features, including support for jQuery function overloads.

And it would have been neat to cover the cool diff-on-commit view.

But, alas, it was not to be.

For those features, and many more, I recommend you check out the videos I referenced earlier. I’ll even embed some of those in the next section, because this post wasn’t quite long enough.

Neat Videos You Should Watch

All of the Monaco videos are good, but these are some of my favorite.

First Steps

Editor Tips And Tricks

Getting Started With PHP

Debugging node.js

And last, but not least, Getting started with TypeScript. Why? Because the Monaco editor was written in TypeScript!

X ITM Cloud News


Next Post

Two great Kickstarter projects ending soon: Durandal JavaScript framework and bitCommander File Manager

Mon Nov 25 , 2019
Spread the love          I like Kickstarter. It’s not a store, it’s an easy way to help fund creative projects. You back projects you find exciting at different reward levels, and then follow along with the project’s progress. I blogged about the You might think it’s just Miller columns (recently popularized as […]

Cloud Computing – Consultancy – Development – Hosting – APIs – Legacy Systems

X-ITM Technology helps our customers across the entire enterprise technology stack with differentiated industry solutions. We modernize IT, optimize data architectures, and make everything secure, scalable and orchestrated across public, private and hybrid clouds.

This image has an empty alt attribute; its file name is x-itmdc.jpg

The enterprise technology stack includes ITO; Cloud and Security Services; Applications and Industry IP; Data, Analytics and Engineering Services; and Advisory.

Watch an animation of  X-ITM‘s Enterprise Technology Stack

We combine years of experience running mission-critical systems with the latest digital innovations to deliver better business outcomes and new levels of performance, competitiveness and experiences for our customers and their stakeholders.

X-ITM invests in three key drivers of growth: People, Customers and Operational Execution.

The company’s global scale, talent and innovation platforms serve 6,000 private and public-sector clients in 70 countries.

X-ITM’s extensive partner network helps drive collaboration and leverage technology independence. The company has established more than 200 industry-leading global Partner Network relationships, including 15 strategic partners: Amazon Web Services, AT&T, Dell Technologies, Google Cloud, HCL, HP, HPE, IBM, Micro Focus, Microsoft, Oracle, PwC, SAP, ServiceNow and VMware