This year at the //build/ conference I gave a session on Visual Studio Web Tools and Web Essentials. It’s now online on Channel 9 in case you want to watch it.

I was using a few extensions that are great for any web developer using Visual Studio 2013. I’ve compiled the list of extensions here and added a few additional ones that are really useful as well.

Web Essentials

This is the ASP.NET and Web Tools team’s official unofficial playground – owned and driven by the open source community. It adds a huge number of features relevant for web developers, such as LESS/Sass/CoffeeScript compilers, code linters, additional Intellisense for JavaScript/CSS/HTML/JSON, validators, image sprite creation and a lot more.

SideWaffle

A delicious side dish for Visual Studio. This is an awesome template pack containing both Project Templates, Item Templates and Snippets for a wide variety of scenarios. From building Angular.js apps, Nancy FX projects, Browser Link and Chrome extensions and a lot more.

File Nesting

This extension let’s you manually nest and unnest files in Solution Explorer. It also has an option for doing the nesting automatically based on file naming conventions. This is great for nesting *.min.js and other related files under parent files.

JSON Schema Generator

Visual Studio 2013 will provide full Intellisense and tooltips for any JSON file that is associated with a schema. This extension lets you right-click directly on a JSON file in Solution Explorer and generate a schema file based on the source JSON file.

Here are some additional extensions that might be of interest to you as well.

WebJobsVS

In the Day 2 Keynote I showed how to create a C# console application project and use it as an Azure Webjob. To associate the console application with my web application, I used this extension. It was developed by folks working in the Azure team.

SlowCheetah – XML transforms

A great extension that enables you to transform your app.config or any other XML file based on the build configuration. Basically, this extension enables scenarios for XML transforms that are currently only available for web.config files.

Mexedge Stylesheet Extension

This is a beautiful extension that provides CSS document outline directly inside Solution Explorer. Not only does it look great, it also gives a very convenient overview over media queries, selectors and rule sets. This is a must-have for any web developer working with CSS.

PHP Tools for Visual Studio

In my live Channel 9 interview we talked briefly about this excellent extension for PHP development. This gives you PHP Intellisense, debugging, code navigation and a lot more inside Visual Studio. A must-have for PHP developers that want the awesome power of Visual Studio.

Cobisi Routing Assistant

This is a great extension for visualizing your ASP.NET routing table and to find what URLs map to what routes. It makes it easier to diagnose routing issues and even provides some great editor tooling features as well.

Lua Test Adapter

If you’re using Lua for your JavaScript unit tests, then this extension will integrate it directly into the Test Explorer in Visual Studio. It makes it really easy to execute tests all at once every time you build the project.

Comments

Hey Mads -
It was awesome seeing the talks at Build last week. I just updated Web Essentials installed Update 2 RC and had a quick question - when using a Single Page Application where all of the mark-up is injected into the DOM there really isn't a way to use two-way binding with F12 tools, correct?

Mads,
In your talk you showed how the tooling will help developers with popular frameworks like angular and bootstrap.
Quick question, what is the behaviour of this angular support when I'm writing a template. For example in there I may use,ng-controller but there won't be a corresponding ng-app in the same file?
Just a note, liked json schema! Any plans to convert a json schema to a typescript def or vice versa?

The angular validation will not kick in when you're writing templates. It requires that the HTML element is in the same file to start the validation.
I actually wrote an extension for Paste JSON as TypeScript before. That's easy. Let's put it into Web Essentials. Thanks for reminding me.

Mads,
Great talk at Build last week!
Do you need to be running Windows 8 to be able to use browser link to edit CSS files? I'm running Windows 7, and I can edit the text on pages, but when I try to change CSS, it only changes it in the browser and does not update my code.
Thanks for any suggestions!
Mark

Mads,
If I use a ASP.NET Web based project template (for example) then all the Web Essentials functionality is accessible but if I kick a project off using a NodeJS for VS project template then none of the Web Essentials features are available. For example - no context menu option to create a _references file and no javascript intellisense.
Is the Web Essentials tooling only available for ASP.NET based projects or should it (at least intellisense) work across any javascript - based code base ?
--
Thx
Don

@Mark, it works on all OSs and Browsers, but Windows 7 doesn't support Web Sockets, so you don't get the ultimate experience there. Remember to turn F12 Auto-sync on in the injected menu.
@Don, some features doesn't light up when using the Node Tools for VS. That's because they are using a different project system and in some cases it's simply because we haven't added support for it in WE yet. That should be considered a bug and be raised on the GitHub issue tracker.
@mmisu, Visual Studio has come with a pure HTML, CSS, JavaScript project since 2005. If you go File -&gt; New Website -&gt; Empty, then you get exactly that. An empty, folder based website.

CssCop gives a warning
Warning 2 Expected LBRACE at line 71, col 1.
This is at the end of the CSS file, just past the last closing brace. There are no braces without a matching brace; in any case, LBRACE (assuming that means left brace) would be an opener, not a closer. Any ideas?

"Resharper is another great tool. I cant imagine using VS without it"
I can - it's called "JetBrains IDEA for C#" - why Microsoft didn't just buy Jetbrains is completely beyond me, as they would have had a much better IDE, much earlier.