Sometimes I have wondered just what the h**l they were thinking over at Microsoft: their flagship development tool just didn’t perform and deliver what you would expect from a tool of that caliber. That was before the Microsoft Visual Studio 2010 (VS 2010)! I will try to write about features in VS 2010 which makes me happy as a frontend web developer, hoping that you will gain something from it – and please do comment and share your experiences.
The background: What I missed…
I have during my 15 years career as web developer tried various development tools, and have touched the “backend” development side of web applications also. It seems that many rich development tools focus on the heavier backend development part of web application development with things like intellisense, snippets and so on. I have often wondered: Why should it be so difficult and not possible – especially in VS – to automate things, processes which is done many times every day? Rich development tools RDTs should support the “web craftsmen” trying to produce quality work. In real life “real” tools for craftsmen like a carpenter have evolved. Quality tools make the fundament for quality work! Anyway, we might just have got a piece of quality tool in VS 2010!
In this part I focus on javascript in VS 2010.
Javascript intellicence
jQuery embedded from local “standard” API javascript file.
It is near perfect now! The intellisense engine in VS 2010 seems to “think” nearly perfect. Say you want to use jQuery. If you include your jQuery API using a local version, you will get basic intellisense – that is objects inside the jQuery API will appear as you start typing. You will get relevant methods shown together with basic information about which parameters you can use. Okay, but it gets better!
Microsoft minimised version of jQuery still has intellisence
jQuery embedded from Microsoft at: http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js
Using the MS CDN to get even a minified version of jQuery, you still get extensive intellisence!
Note:
After you have added any external script file you can update the javascript intellisense using [Shift]+[Ctrl]+J. For big APIs like jQuery this might take perhaps 20 seconds.
jQuery plug-ins handled as well in intelisence
Extra jQuery plug-ins added will also get intellisense, as expected, but also at the correct place
below you can see that I have added a script reference to the jQuery Cycle plug-in for jQuery. The “cycle” method now exists after I have used a jQuery selector $(‘#test’). The description of the method “cycle” however is not very useful – but that is because that the jquery.cycle.all.min.js file does not contain JavaScript documentation (more about that later).
If you think about it – VS 2010 is quit smart! It scans the cycle plug-in and sees that it extends the jQuery API. That is how it can figure out – I guess – that the cycle method fits in as a method on a found elements of the “$” (or jQuery) method. Nice feature!
Dropdown filelist simplified
Automatic dropdown file list when adding HTML code like “script”. Previously you had to click the “Pick URL…” and then point to the file which you wanted to use in your HTML document. Now you simply click on the file, if it is located at the same place as the current document. Nice.
”
Snippets – finally!!
I have written about snippets in Visual Studio in a previous post: Find Visual Studio Snippets ready for download on my DropBox folder, but it is first in VS 2010 that it is actually possible to execute snippets in HTML mode! (Why, why, why?). Anyway you can now! And VS 2010 comes with a few snippets installed.
Snippet types “Surround with” and “Insert snippet”
If you do not know how to activate them try the “surround with snippet” by pressing [Ctrl]-K, [Ctrl]-S. By doing that you get the chance to automate things like creating a JavaScript function using just two keyboard clicks and a mouse click. The Insert snippet can be archived using [Ctrl]-K, [Ctrl]-X. And remember: You can always create your own!
Just discovered that in fact Microsoft has not made it possibel to use snippets within CSS… Why, why, why???
Intellisence will execute your code dynamically to give better suggestions
Say you define a string “effect” and assign it a string value. This will make VS 2010 execute the assignment and then “guess” that your variable is of the type String. So at a late point in your code you try to use the variable, the suggestions given by intellisense will be relevant to that type (string). Look at the example below. To the left a variable “effect” and to the right an “int”, the suggestions are not the same. Smart! and you can do some pretty nice things when your code is dynamically executed – try visiting the JavaScript Intellisense Improvements with VS 2010 – on ScottGu’s Blog and have a look at those examples.
Your own intellisence using XML comments!
Now there is no excuse why you do not document your JavaScript code! VS 2010 offers easy documentation using snippets and XML comments! It is so easy, simply press [Ctrl]+K, [Ctrl]+X, choose “XML Comments” and what type of comment you want to insert. After having done and (of cause) filling out the marked fields, your code will be providing intellisense and suggestions when other people use it! Cool!
You can see below a simple function called “myhide”, The 3 lines below the function have been inserted using the above mentioned XML comments snippet. I defined a summary, a return definition and a param description. Voila! My function now has intellisense and build in help – which will without doubt be useful for me and others at a later state. You can make this part quit advanced with references to documentation files, assemblies and more.
Various small changes
- You can zoom the work area as you can in your browser. Just hold down
[Ctrl]while rolling the wheel of you mouse up and down. Guess that woud be nice for elderly people like me 
- All these improvements also apply to the free Visual Web Developer 2010 Express!
Links
