The beta version of Visual Studio 11 has arrived! While it may not be feature complete yet and even the name may change before it is actually released, it is still worth taking a look at and seeing how this new product will make software development even easier than before.
To start off testing the new version of Visual Studio, you can go to this URL and download the beta version. http://www.microsoft.com/visualstudio/11/en-us
The first thing you notice when you start up VS 11, is that the application is a lot cleaner. There is less chrome around the edges, and even the separate window panes inside the tool have minimal boundaries between content areas.
I’m going to be demoing some of the new features of VS 11 by using the WingtipToys demo for VS 11 Beta. The project can be downloaded from http://code.msdn.microsoft.com/vstudio/Getting-Started-with-221c01f5
New tabbing features
Productivity improvements are noticeable as soon as you click on a file. The file is loaded into the source panel area but you notice the tab for it is located on the right instead of on the left.
This means the document is in preview mode. It will be replaced when you click on another file in Solution Explorer. This is really useful when debugging an application and you may hit a couple of dozen files before locating the error. Instead of all the files showing up as tabs, they quickly come and go in the preview mode. You can keep the file as an active document in the source panel by double clicking the file in Solution Explorer, or by clicking on the small folder icon in the tab for the file (located just above the pointer in the image above).
Each tabbed document is now “pin-able”. Pinning a document keeps its tab in view while other documents will scroll by or be minimized.
JavaScript IntelliSense
Editing JavaScript has become even better with the new and improved IntelliSense. Standard objects such as “document” now have all methods, collections, and properties shown once you put the “.” at the end of the object. The editor is now ECMAScript 5 compliant.
Notice the small icons next to the document elements in the image above. You can easily tell the methods from the properties. This is great for standard objects but since JavaScript is a dynamic language, some variables don’t have a specific type associated with them until run time. Microsoft overcame this limitation by letting the developer comment the variables with the data type the developer is expecting.
Notice in the image above, the developer has written comments for two versions (signatures) of the lee_test_func function. One that has one parameter and a second overload that takes two parameters. Also notice that Visual Studio IntelliSense has picked up on this.
In the above image the developer has documented the two variables associated with the function and IntelliSense picks up on the object type. IntelliSense will also pick up on JavaScript files linked to the page you are on so you can easily reference them when writing your code. So if you like to use such third party JavaScript libraries as jQuery, VS will now provide IntelliSense for them. For a full list of the JavaScript enhancements, you can view them at this URL:
http://blogs.msdn.com/b/webdevtools/archive/2011/09/15/new-javascript-editing-features-for-web-development-in-visual-studio-11-developer-preview.aspx
CSS Editor
The CSS editor has been completely rewritten for this version of Visual Studio. Gone are the long listings of erroneous warnings that your CSS is incorrect. IntelliSense is once again improved and even includes a color selector for selecting colors!
Notice in the “background-color” attribute in the image above. The color selector contains your default pallet of colors. To get more selection, click on the double down arrow located to the right of the color pallet in the above image to bring up the full color selection tool (shown below).
The CSS inspector will also highlight mistakes such as having two of the same elements in a block. So if you have “margin” defined twice for your DIV, it will now be highlighted as a possible error.
Page Inspector
One of the coolest new features for web developers is Page Inspector. In order for this to work, you will need to have IE 9 running on your development computer. This feature allows you to fine tune the UI like you have never have been able to before.
To start off with Page Inspector, right click on a web document you would like to see. A list of options opens up. Select “View in Page Inspector” as highlighted in the image above.
Once Page Inspector has started, you will see four panels displayed. One panel shows the web page as it appears in the browser. It is actually running the browser within the pane. Another window shows the “source” of the page as the browser sees it (this is located in the above image in the lower left corner). The window next to the page source view is the style inspector. The last pane is the source as seen in your solution.
Taking a closer look at the browser pane, you can see a few interesting details. First, notice the cursor is now a crosshair. It allows you to hover over each element of the web page and see the details for it. In the image above, the cursor is over the text “Planes”. The blue box around the text indicates this is an individual element and the “a” on top indicates it is an “anchor” element. Page Inspector also shows a count of issues when rendering the page, allows you to refresh the page, and even navigate to a different URL.
As you move the cursor over the web page, Visual Studio keeps track of where you are at in the view page source panel so you can see the actual HTML for the element highlighted by the cursor. You can also see the styling for the highlighted element in the panel next to it. You can even click on the style element and it will bring up the style sheet or document in the code editor and you can update the style on the fly!
In the code editor window, the code is also highlighted according to where the cursor is in the web browser. Also notice in the image above, that as of .NET framework 4.5, Web Forms support data binding and you get IntelliSense when selecting elements in a bindable component. That will surely cut down on runtime errors!
Finally
These are just a few of the improvements coming in the new version of Visual Studio. Some of the things mentioned will probably change before the product is released. There are some elements missing like the ability to publish to Microsoft’s Windows Azure cloud service. One thing is for sure, this developer is looking forward to the upgrade!