Visual Studio Front-end development tools/Extensions

How to get Visual Studio to better write HTML5, CSS3, JavaScript, JQuery, in other words, how to do the front-end development better. Visual Studio 2010 is not fully optimized for front-end development, either in the flagship or the free version. Do not want vs default Install these things, we have a lot of vs extension but use.

In this post you can see that there is a set of my favorite extensions and tools that will make Visual Studio easier for Web development, I'm just concentrating on some of the tools I've installed and used, and if you have anything else to use, please leave a message here.

Most of the extensions listed here can be installed using Extension Manager (Tools > Extension manager), which you can download 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 I recommend extension of editing HTML5, CSS3 and JavaScript code, developed by Microsoft's visual Web Developer team, including support for HTML5 schema, and improved smart hints for CSS3 and JavaScript. Although Visual Studio Service Pack 1 provides support for some HTML5 schemas, I recommend using this (which 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 used to the syntax highlighting in C #, area outline folding and other functions, JavaScript is not supported by default, this plugin is to do this thing.

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

Check out one of the app videos on Channel9 for that extension.

Mindscape Web Workbench

Download: Mindscape Web Workbench

Scott Hanselman has a post that specifically explains the Mindscape Web Workbench extension under Visual Studio, which adds support for Coffeescript, SaaS, and less. Worrying about having too many extensions? Not necessary, as a developer is necessary.

Coffeescript:coffeescript is a language that compiles code into JavaScript.

Saas:sass is an extension of CSS3, adding features such as variables, mixins, selector integration, and more. It can standardize and format CSS code, and use the VS extension to automatically format the code.

The 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 that there is no way to 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 be uncomfortable at first because he uses a lot of rules like C # (for example, some variables are declared but not used) to prompt for warnings when compiling. 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 jquery and jquery smart hints files, and if you want to use jquery smart hints for other types of projects, This can be done by downloading the Jquery.vsdoc NuGet package, but the jQuery1.6 version will already contain the Vsdoc file by default in the NuGet package, without having to download it separately.

Image Optimizer (by Mads Kristensen)

Download: Image Optimizer

Visual Studio Extension tool image Optimizer uses Smushit and punypng to optimize compressed images, and running this extension under the Project Pictures folder compresses all picture files in that directory. The compression ratio is typically 15% to 40%.

Other untested tools

Jsenhancements: Similar to jsscript Editor extension, provides outline and javascript/css highlighting

CSS 3 IntelliSense Schema

Chirpy: Dealing with JS, Css, and dotless files vs add-in

ReSharper 6, many developers have used tools that support JavaScript and CSS (paid software).

ASP. NET MVC & HTML5 templates

Download the template for the MVC3 project through NuGet, which supports more new types of HTML5 elements (such as the type new type of input email,tel,url, etc.), which is not 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.

Visual Studio Front-end development tools/Extensions