Visual Studio 2010 Front-End Development Tools/Extension/Plugin Recommendation _ Practical Tips

How to get Visual Studio to better write HTML5, CSS3, JavaScript, JQuery, in other words, how to better do front-end development. Visual Studio 2010 does not fully optimize front-end development, either the flagship or the free version. Do not want to install these things against the default, we have many vs extensions that are used.

Most of the extensions listed here can be installed using Extension Manager (Tools > Extension Manager), and you can download these extensions through the Visual Studio Gallery Web site.

WEB Standards Update for Visual Studio
Download: WEB standards Update for Microsoft Visual Studio SP1

This is the first of my recommended extensions for editing HTML5, CSS3, and JavaScript code, developed by Microsoft's visual Web Developer team, including HTML5 schema support, and improved CSS3 and JavaScript smart tips. Although Visual Studio Service Pack 1 provides support for some HTML5 schemas, I recommend this (should be up to date). For more information on this, please visit: WEB standards Update-behind the scenes


JScript Editor Extensions
Download: JScript Editor Extensions

You may be accustomed to the syntax highlighting in C #, area outlining folding functions, javascript default is not supported, this plug-in is to do this thing.

After you install the JScript Editor extension, you can open and disable the following different extensions: Brace matching,jscript Intellisense <para>,outlining and Word Highlighter. Sometimes it's better to know some dependency extensions. For example, jQueryUI relies on jquery.

Check out the Channel9 for an application video on the extension.


Mindscape Web Workbench
Download: Mindscape Web Workbench

Scott Hanselman has a post dedicated to the "Mindscape Web Workbench" extension under Visual Studio, which adds support for Coffeescript, SaaS, and less. Worry about having too much to expand? Not necessary, as a developer is very necessary.
coffeescript: Coffeescript is a language that compiles code into JavaScript.
SAAS: Sass is an extension of CSS3, adding features such as variables, mixins, and selector integration. It can standardize and format CSS code, and use the extension of VS to automatically format code.
less: Less and Sass types also provide support for variables, mixins, but he provides a server-side server and a plug-in that translates code into standard CSS (by running a JavaScript class library on the client).


jslint.vs2010
Download: jslint.vs2010

When you see the jslint name, you may feel like you can't do front-end development without JavaScript. But how to use some patterns and verify your JS code, JSLint can do it for you. Using this plugin may make you feel uncomfortable at first because he uses a lot of rules like C # (for example, some variables are declared but not used) to prompt for a warning at compile time. But after a while, you'll find that it does help you get rid of a lot of bad habits and make your code easier to maintain.

(as you can see, the code can run, but it prompts a lot of warnings)
You can also view its online version: Http://jslint.com



jQuery IntelliSense
The ASP.net MVC3 project was created with the jquery and jquery smart tip files, and if you want to use jquery Smart tips for other types of projects, You can do this by downloading the Jquery.vsdoc NuGet package, but jQuery1.6 later versions default to the Vsdoc file already contained in the NuGet package, not downloaded separately.

Image Optimizer (by Mads Kristensen)
Download: Image Optimizer
Visual Studio's extension tool image Optimizer uses Smushit and punypng to optimize compressed images, and running this extension under the Project Pictures folder compresses all the picture files in that directory. The compression ratio is usually 15% to 40%.

Other untested Tools
Jsenhancements: Similar to jsscript Editor extension, provides outline and javascript/css highlighting
CSS 3 IntelliSense Schema
Chirpy: Deal with JS, Css, and dotless file vs add-in
ReSharper 6, a lot of developers have already used tools that support JavaScript and CSS (billing software).


asp.net MVC & HTML5 templates
Download the template for the MVC3 project by NuGet, which supports more new HTML5 elements (such as type new type of input email,tel,url, etc.), which is not exactly a tool, but because it's interesting, it's listed in this post.

If you have any good tools, please reply in the message, thank you.

Original address: Http://blogs.msdn.com/b/katriend/archive/2011/09/12/my-favorite-tools-to-optimize-visual-studio-for-webdev.aspx

The above visual Studio 2010 Front-End development tool/extension/plug-in recommendation is a small series to share all the content, hope to give you a reference, but also hope that we support the cloud habitat community.