Visual Studio has added a brand new member to your family. Visual Studio On the web, currently going by code name Monaco, can be an on the web code editor. That's on the web, in the browser, where you write code. The Visual Studio on the web editor is very a convenience, particularly for the days each time a web developer must logon remotely or away from home, whenever you may possibly only have a tablet or mobile device handy (ARM tablets, for instance , wont run the total Visual Studio).
Remember days previously when installing Visual Studio? Frequently , you had put aside a fifty per cent of a day simply to install the application. Not any longer. There's absolutely no installation needed to use Visual Studio on the web, nor exist browser plug-ins, making Visual Studio on the web nice editor that works on any platform.
Fun fact: Visual Studio On the web (Monaco) is created with TypeScript.
Getting to grips with Visual Studio On the web
You have to sign to the Windows Azure Portal to make use of Visual Studio On the web. Once you're in the portal, there exists a switch you have to flip to guide on the web editing. This switch is found in the Configure tab toward the underside of the page. The image below highlights the configuration options you need to set (basically just turning on the web editing ON):
Once you have enabled the internet site for on the web editing, go right to the site's dashboard in Azure and down load your Publish Profile. The Publish Profile is definitely an. xml file which contains connection information as well as your user name and password. You'll need the credentials included in the publish profile so that you can log to the editor.
Whenever you open the publishing profile, you will find two <publishProfile> elements in this file, one for Web Deploy plus one for FTP Deployment. Locate the profile with publishmethod="MSDeploy" and make use of the associated credentials listed there to log in to Visual Studio On the web. In these sample, the consumer name is $MonacoTestSite, and the password is obfuscated. The Publish Profile looks something such as this:
<publishdata>
<publishprofile profilename="MonacoTestSite - Web Deploy" publishmethod="MSDeploy"
publishurl="waws-prod-am2-003. publish. azurewebsites. windows. net: 443"
msdeploysite="MonacoTestSite" username="$MonacoTestSite"
userpwd="AVeryStrongPasswordWithALongStringOfMixedCaseCharactersNumbersAndSymbols"
destinationappurl="http://monacotestsite.azurewebsites.net" sqlserverdbconnectionstring=""
mysqldbconnectionstring="" hostingproviderforumlink="" controlpanellink="http://windows.azure.com">
<databases />
</publishprofile>
<publishprofile profilename="MonacoTestSite - FTP" publishmethod="FTP" … > </publishprofile>
</publishdata>
Enter these credentials to the Visual Studio On the web login prompt to start writing code. Whenever you want, in Azure, you are able to reset these credentials, but make sure you down load a brand new publishing profile should you.
Editing Files On the web in Visual Studio
The Visual Studio on the web editor has got the two most critical IDE features - color coded syntax and Intellisense. You are able to edit several different file types including. html,. css,. js,. aspx,. cshtml,. php, yet others. Unlike the desktop version of Visual Studio, the internet version is lightweight with a tiny toolbar and navigational area left. Its minimalistic style creates a Zen IDE.
The left side toolbar contains common commands such as for instance Run, Show Output, and Open Console, along with connections to Git and source code get a handle on. Even though the editor is lightweight, there are numerous keyboard shortcuts for popular commands, and particularly, Ctrl + E, which opens an explorer window to navigate files or code, as outlined in this image:
As you care able to see, the editor is lightweight but of good use. In the image below, the most notable marked location shows a fantastic feature of CSS editing. Upon mouse hovering over a CSS selector, VS On the web will show the HTML to that the selector applies. This causes it to be quite simple to debug CSS syntax. Also depicted in the blow image, the customary Find References command opens an inline preview. In this preview window you can test the calls for this method or uses with this variable, whilst keepin constantly your spot in the first file you might be editing. This really is quite handy when debugging.
Obviously there are numerous other features, and because it is just a cloud based app, new features appear often. This makes VS On the web worth serious development, including that of large projects and teams.
Utilising the Console
The Console is like the an OS command prompt in Windows or Visual Studio's package manager console (desktop editions). Typing "help" and pressing enter at the console reveals these commands:
Command Description
cd Directory navigation
del Delete file
dir Directory browsing
express Express node. js MVC framework commanding
git Git source get a handle on commanding
help List of available commands
jake Jake commanding
ls Directory browsing
mkdir Create directory
msbuild MSBuild commanding
node Node. js commanding
node-sass SASS translator
npm Node package manager
nuget NuGet commanding
ps PowerShell commanding
rd Delete folder
rm Delete file
rmdir Delete folder
unzip Unzip archives
Realize that there is both DOS and Node commands.
Summary
Monaco is a good editor for many who do not wish to install Visual Studio for reasons uknown. You are able to edit HTML, JavaScript, and CSS files on the web with color coded syntax plus some basic Intellisense. And it is all hosted in the cloud - Azure, making deployment a nonissue and that is ideal for almost any size site or app.
Visual Studio on the web completes your family of Microsoft developer editor products and services. The present lineup is Monaco, WebMatrix, Visual Studio Express, Visual Studio Professional, Visual Studio Ultimate, as well as other editions for developing in Windows and. NET. To learn more on Visual Studio begin to see the VS 2013 comparison matrix.
