在线开发应用，Visual Studio Online 来了

古城微笑少年丶 2022-08-25 09:13 16阅读 0赞

去年年底，微软发布了Visual Studio Online产品。众所周知，Visual studio是一个IDE，可以开发C/C++/C\#/VB程序，最近也开始支持javascript/python的开发。那么Visual Studio Online的意思是什么呢？难道是把Visual Studio运行在网络上，然后用虚拟桌面？当然不是这么简单。Visual Studio Online是微软云+端战略的重要一环，既然一些软件都SaaS话了，那么开发工具为什么不可以呢？Visual Studio Online的理念，就是通过网络去交付开发、测试、管理版本、管理Bug、项目协作。为了实现这一理念，微软基本上重构了之前所有的产品，包括TFS，Visual Studio等等。Visual Studio 具体包括如下组件：

1. 源代码管理、项目管理。包含了以前TFS的核心功能

2. 云端编译。可以从源代码管理里面checkout 代码进行编译，生成发布文件（支持.NET)

3. 性能测试。可以在线利用云端资源发起大规模性能测试。

4. 应用监控。可以在线监控应用，进行应用诊断，对于.NET应用可以进行深入监控，比如监控.NET运行的各种指标、调用栈分解、故障源定位

5. 在线代码开发（代码名为Monaco）。支持ASP.NET/PHP/Nodejs的在线开发

所有这些组件都是Web应用，都是通过浏览器来访问，客户端无需安装任何插件，真正实现云中开发、云中测试、云中运行。对于码农来说，哪里有网络，哪里就能干活

听起来比较抽象，下面眼见为实。其实Visual Studio Online的全部功能在国外已经上线了，访问www.visualstudio.com即可进行注册

而在国内，Visual Studio Online的在线代码开发这一功能，已经随着Azure 网站服务低调上线。

下面我们以PHP为例，了解下这个功能。

首先，我们在Azure中国站点创建一个网站。建好之后，我们在页面底部可以看到Webmatrix图标，我们可以点击下载Webmatrix，用这个工具进行代码开发，具体可以参考[http://blog.csdn.net/shaunfang/article/details/16857095][http_blog.csdn.net_shaunfang_article_details_16857095] 。这里不再赘述

![SouthEast][]

也许我们并不想下载IDE来开发，比如我们就是想改一行代码，大家一般会用文本编辑器来做。有了Visual Studio Online，我们就会更方便。缺省这个服务是关闭的。开启时，首先进入配置页，将“在 VISUAL STUDIO ONLINE 中在线编辑”选项打开，然后保存

![SouthEast 1][]

然后回到Dashboard，在页面的右侧，增加了一个链接：在 Visual Studio Online 中编辑。点击就可以进入Web版的Visual Studio了

![SouthEast 2][]

左边是功能列表，右侧是代码视图。代码视图支持语法高亮，支持C/C\#, VB, PHP, Python, Javascript, CSS, HTML等各种语言

![SouthEast 3][]

功能上，支持目录视图、文件查找、源代码管理、在线编译与运行、Console输出。下面我们来新建一个PHP文件，点击页面左上方的新建文件按钮

![SouthEast 4][]

然后开始编辑内容。故意输入一些错误的语句

![SouthEast 5][]

然后我们访问下网站，发现更改生效了

![SouthEast 6][]

代码的修改是实时保存的，不需要手动保存。实际上也没有保存按钮。如果是.NET代码，可以运行Run进行编译，编译后会提示编译错误，点击错误链接可以直接定位到错误代码

![SouthEast 7][]

点击左侧菜单栏里的Open console按钮，我们可以打开console视图，这个视图会监控php的错误日志文件，实时呈现PHP的错误，方便我们调试

![SouthEast 8][]

此外，我们也可以直接上传本地的代码文件

![SouthEast 9][]

可以把本地文件直接拖拽到目标目录中，可以在目录之间移动文件

也可以打包下载云端的代码。此外，我们可以点击页面右上方的编辑器功能按钮。比如切分窗口，显示多个文件

![SouthEast 10][]

或者通过多种命令或者快捷键进行文本编辑

![SouthEast 11][]

比如自动排版，列出函数，查找变量，函数跳转，变量更名

甚至还可以做代码比较，以及历史版本比较

![SouthEast 12][]

还可以做代码提示

![SouthEast 13][]

还有HTML

![SouthEast 14][]

选中后直接生成下面的片段

![SouthEast 15][]

是不是很方便？就代码编辑功能来说，它不比桌面版的差多少，试用过以后就会惊叹，HTML也能做成这样？

然而，它的真正强大之处，是可以支持.NET的编译和运行，支持在线命令，这就不是一个单纯的文本编辑能做到的

打开左侧菜单栏的命令功能，可以用help列出支持的命令。

![SouthEast 16][]

我们可以在线执行build，可以支持Powershell命令，可以进行文件和目录操作，可以进行git操作，可以进行Zip解压缩，可以安装node扩展包。

如果这些命令不够，我们还可以创建bat文件，然后调用该批处理文件。比如我们可以用bat命令下载PHP扩展包

想要详细了解强大的Visual Studio Online的Monaco，可以观看这些视频演示

[http://channel9.msdn.com/Series/Visual-Studio-Online-Monaco ][http_channel9.msdn.com_Series_Visual-Studio-Online-Monaco]

[http_blog.csdn.net_shaunfang_article_details_16857095]: http://blog.csdn.net/shaunfang/article/details/16857095
[SouthEast]: /images/20220824/a1d55fd7651246bb94e924acea5d9f99.png
[SouthEast 1]: /images/20220824/33b1f0ff0c5a40a2b21513e21f8b8e04.png
[SouthEast 2]: /images/20220824/1a82de1250cb45d7a33d90db8301399f.png
[SouthEast 3]: /images/20220824/b8bd847861604ad7b35e8ea7ca68e489.png
[SouthEast 4]: /images/20220824/6f10a628289345d4b72278c74fe0d5c4.png
[SouthEast 5]: /images/20220824/0be058bab0844ec09ceff931dd935227.png
[SouthEast 6]: /images/20220824/ac668345e2f14afc8da67ebe293622c8.png
[SouthEast 7]: /images/20220824/7486fa18251249eb8b3a6bd25178bd9d.png
[SouthEast 8]: /images/20220824/11c9f2941fe1411aae3cdf36cc6b90cd.png
[SouthEast 9]: /images/20220824/80c6a20c011f4ac8a823c7123c716309.png
[SouthEast 10]: /images/20220824/2fce0e8c43334bdba2d6ef820fad59fb.png
[SouthEast 11]: /images/20220824/122bdb942492497eb1c9b5f4d755dfc7.png
[SouthEast 12]: /images/20220824/dfbf370b0a2f4bf0a7744fbd0de38b15.png
[SouthEast 13]: /images/20220824/0f7dfe68b1794d3aa24b0c415a08188f.png
[SouthEast 14]: /images/20220824/ea8a8d28a06b40e18c166df1f5b9bbe9.png
[SouthEast 15]: /images/20220824/52e061cd91c648d28319c4f22bd817dc.png
[SouthEast 16]: /images/20220824/6d06d4869e9140bcb09503177870f361.png
[http_channel9.msdn.com_Series_Visual-Studio-Online-Monaco]: http://channel9.msdn.com/Series/Visual-Studio-Online-Monaco