From the MVPs: “Script References in Visual Studio 2013”
This is the 32nd in our series of guest posts by Microsoft Most Valued Professionals (MVPs). You can click the “MVPs” tag in the right column of our blog to see all the articles.
Since the early 1990s, Microsoft has recognized technology champions around the world with the MVP Award . MVPs freely share their knowledge, real-world experience, and impartial and objective feedback to help people enhance the way they use technology. Of the millions of individuals who participate in technology communities, around 4,000 are recognized as Microsoft MVPs. You can read more original MVP-authored content on the Microsoft MVP Award Program Blog .
This post is by ASP.NET/IIS MVP James Chambers Thanks, James!
Script References in Visual Studio 2013
Some of the gems that make Visual Studio the best development environment are so humble that you’re likely to miss them. The updates to script references, in my opinion, fall into that category while still improving on an already great feature of the product: IntelliSense for JavaScript.
A Little Background on IntelliSense
IntelliSense has been featured for nearly two decades now in Visual Studio’s lineage, dating back to 1996. Developers have become so accustomed to using it that when you spend any time in a different development environment you immediately feel impaired.
Figure1.png
IntelliSense is great for learning APIs, object exploration and, when used well, can dramatically speed up the time it takes to write code. It also has the nice side benefit of allowing us to write appropriate and descriptive property and method names without having to worry about how long it would take later to access those members by typing them out L-E-T-T-E-R-B-Y-L-E-T-T-E-R.
When feature phones started introducing autocomplete, I was like, “Pfft! I’ve had autocomplete for years!”
IntelliSense for JavaScript
Let’s be honest here, the web’s kinda caught on now, almost to the point where it might stick around. More and more of the code we write has gotten closer to the client, especially in web development where we strive to create rich and interactive experiences for our users. It became increasingly painful to have to flip from a .Net language to JavaScript and lose our ability to navigate across objects. Where, in C#, we could dot-type into our objects, we’d always have to jump out to a separate JS file or spin up a browser to find out more about the methods in a JavaScript library.
Thankfully, Visual Studio 2008 introduced the first bits that really helped us gain some IntelliSense over our JavaScript, however the context was limited to pages and scripts where references were located, and the scripts they referenced and so on. This breaks down pretty quickly when you have partial pages that don’t reference the scripts you’re using or when you’re working on your own JS libraries that don’t immediately load a library but still depend on it (such as a jQuery plugin).
Visual Studio 2010 helped out by pseudo-executing our code, improving performance, and adding type inference on JavaScript objects and variables. Then Visual Studio 2012 came along and upped the game by introducing the Chakra runtime from IE, further improving performance and shipping with an editor that supported the _references.js global references file.
So what was left for Visual Studio 2013?
I’m So Glad You Asked – Let’s Auto-Sync Up on That
Getting to this point took some time, but it was worth the wait. Even without having extensive documentation on our libraries, Visual Studio was able to offer us a great IntelliSense experience and afford us many luxuries to accommodate our work style. But this post isn’t about IntelliSense directly, it’s about how Visual Studio has gotten even smarter in how it keeps IntelliSense in sync.
The first way they improved on this in Visual Studio 2013 was with the “auto-sync” feature of the _references.js file, as you see activated in Figure 2.
Figure2.png.
Auto-sync keeps your _references.js file up-to-date as you move files around or rename the scripts you write. For example, if I move my shapes script by dragging and dropping it into a StyleFramework directory, the result is what you see in Figure 3. The reference is automatically updated with the new file location.
Figure3.png
Not a One Trick Pony
At first glance this is convenient, but auto-sync doesn’t stop there. The feature is aware of your project’s dependent packages, so as you install or upgrade packages, your _references.js file is kept up to date as well. Check out what happens to the file name (notice the version) after I upgrade my jQuery package to the latest version, illustrated in Figure 4.
Figure4.png
Whoa! Little code ninjas from programming heaven have saved you from disappearing IntelliSense! Without that version update, you’d lose your dot-completion; with it, well, it’s a thing of beauty.
There are some instances where the file might lose tracking on one or more files, perhaps while you have the _references.js file open while making a number of other changes. Or maybe you prefer to turn auto-sync off and control the reference updates yourself. For these scenarios, VS 2013 has also introduced the “Update JavaScript References” command, available from the context menu when you right-click in the _references.js file, as seen in Figure 5.
Figure5.png
Selecting this command will refresh your _references.js file, inserting any missing JavaScript references from your project and any packages you’ve installed. The refresh is smart enough to ignore .min, .map and vsdoc.js files, adding only one reference per library.
For Those of You Just Tuning In
If you haven’t yet made use of the JavaScript references/IntelliSense love that Visual Studio’s been selling, I just want to make sure you know about this key piece that makes it tick: the _references.js file that I’ve mentioned throughout this post. As a convention, each web project will contain a _references.js file in the /Scripts folder that will look pretty similar to what you see above. If you do a ton of work with a specific library in your daily duties, you can add additional global references through the IntelliSense options for JavaScript. The quickest way to get there is to type “JavaScript IntelliSense” in the Quick Launch window, just press Ctrl+Q to jump there. The results for this query are in Figure 6. Add your references through the dialog appears and you’ll be dot-tapping away in no time.
Figure6.png
Wrapping Up
Our coding styles continue to evolve, as do the libraries and frameworks we lean on. Auto-sync and the ability to refresh your JavaScript references are two of the ways that Visual Studio keeps up with the way you work. IntelliSense for JavaScript gives you excellent code completion and provides a great story around documentation and extensibility, but many developers I talk to are shocked when they see the full capabilities. Here are a few resources to follow up on so you can leverage these features:
· https://msdn.microsoft.com/en-us/library/vstudio/bb385682(v=vs.120).aspx
· https://msdn.microsoft.com/en-us/library/vstudio/hh874692.aspx
Happy coding!
James Chambers is a husband, father, speaker, author and Senior Software Developer in Canada, where he once made a snowblower out of three electric toothbrushes, a shovel and duct tape, all while fighting off an angry pack of polar bears. His development passions are fueled by new tech, new tools and mentoring others. Outside of geeking, James is driven to help find a cure for Juvenile Diabetes, ensure children world-wide have access to clean drinking water and to find ways to better distribute the world's food supply. Follow his coding adventures and other exploits at https://jameschambers.com.