A rich new JavaScript code editor spreading to several Microsoft web sites
I noticed yesterday that some C#, JavaScript and CSS files I had sitting in SkyDrive were suddenly editable.
Not just editable, but there's also autocompletion of strings (not quite intellisense, as it's just one file at a time) and token/symbol recognition.
Plus, this editor looked REALLY familiar to me. I started looking.
I looked over at the Windows Azure Portal, where developers can write node.js to make web services directly in the browser. Here we've got dropbox autocomplete, tooltips with syntax errors and even some basic symbolic refactoring!
_0a64ca47-8928-4183-b09e-85ede8ee7bb5.png "Azure Mobile Service's rich code editor")
Below you can see the editor in Azure Mobile Services throwing a tooltip syntax error. Is this happening on the server?
Then I remember TypeScript's "playground" online that shows how TypeScript turns into JavaScript. This is split-screen with TypeScript on the left and JavaScript on the right.
Then I went to look at TFS Online's stuff at http://tfs.visualstudio.com/ where I made an account http://hanselman.visualstudio.com to host private Git repos for side projects.
_8f63a156-c2e4-48da-b075-9c02873739dd.png "Inline comments in TFS online")
Notice that in TFS Online this editor is used for diffs and comparisons, but also includes inline threaded comments! This is all in JavaScript, people.
_c1d116dc-105c-47f3-8d3f-6153041e5334.png "The editor in a side by side diff")
I brought up F12 tools just to check.
That's pretty unambiguous. Looking at the CSS by just clicking on editor.main.css. The "vs" in the div's class point to a vs-theme.css that I presume is to set the colors and make the text editor look familiar.
Looking in editor.main.js, it's all minified, but it's cool to see.
This JavaScript code editor/viewer component is on a TFS site, an Azure site and a SkyDrive site, being used very different divisions across Microsoft. Very cool to see code reuse, but also a good experience replicated. Kudos to the SkyDrive team for recognizing a good thing and putting it into production. It'll be interesting to see where else this editor pops up in the future.
About Scott
Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.
About Newsletter
Very slick looking editor. Was surprised to find it already listed on a comparison page on Wikipedia. Would be cool to see it added to the list of projects that Microsoft has made open source, especially given its usage in the Azure and TypeScript teams!
Nevertheless, its great to see this and exciting to edit online with intellisense and other goodies!
This library is supported for use in Windows Store Apps Only apps only.
:P
@ Kenneth Truyers
You should check out Cloud 9, the address is c9.io - it's very powerful, even has command line!
Matt
I'm with Jordan, any chance we could see this open sourced? It's cool either way, but it would be uber cool if this was made available to the unwashed masses. :-)
http://typescript.codeplex.com/discussions/401549
Similar typescript integration into ACE editor:
http://guillaume86.github.io/ace/kitchen-sink.html
See eg http://www.ejeliot.com/blog/63.
I know we're not quite there yet, but maybe in a few years, we'll have the Visual Studio Web App.
@kenneth - make that a few months! I'm as surprised as you would have been in August.
Comments are closed.
I know we're not quite there yet, but maybe in a few years, we'll have the Visual Studio Web App. This would open up a lot of new possibilities, like tacking SignalR on top of it, so you have collaborative editing (I know there's a version of VS that already has that), building files on the server on the fly without having to wait, actual continuous deployment, ...
All have their challenges, but still, it would enable a lot of new scenarios, or am I just fantasizing to much?