Shulou(Shulou.com)06/03 Report--

VisualStudio2010 front-end development tools and extensions and plug-ins, I believe that many inexperienced people do not know what to do, so this article summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

How to make Visual Studio better write HTML5, CSS3, JavaScript, jQuery, in other words, how to better do front-end development. Neither the flagship version nor the free version of Visual Studio 2010 is fully optimized for front-end development. Don't expect VS to install these things by default, we have a lot of extensions to VS to use.

Most of the extensions listed here can be installed using Extension Manager (Tools > Extension Manager), which you can download from the Visual Studio Gallery website.

Web Standards Update for Visual Studio

Download: Web Standards Update for Microsoft Visual Studio 2010 SP1

This is the first extension I recommend for editing HTML5, CSS3 and JavaScript code, developed by Microsoft's Visual Web Developer team, including HTML5 schema support and improved CSS3 and JavaScript clevertips. Although Visual Studio Service Pack 1 provides some HTML5 schema support, 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 C # syntax highlighting, area outline folding and other functions, JavaScript is not supported by default, this plug-in is to do this thing.

After installing the JScript Editor extension, you can turn on and off the following different extensions: Brace Matching,JScript Intellisense, Outlining and Word Highlighter. Sometimes it's better to know some dependency extensions. For example, JqueryUI depends on Jquery.

Check out an application video about the extension on Channel9.

Mindscape Web Workbench

Download: Mindscape Web Workbench

Scott Hanselman has a post devoted to the "Mindscape Web Workbench" extension under Visual Studio, which adds support for CoffeeScript, SAAS and LESS. Worried about too many extensions? It's not necessary. Being a developer is necessary.

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

SAAS: Sass is an extension to CSS3, adding variables, mixins, selector integration, and other functions. It can standardize and format CSS code, which can be formatted automatically using extensions to VS.

LESS: LESS and SASS types also provide support for variables, mixins, but it provides a server-side server and plug-ins to convert code into standard CSS (by running a JavaScript class library on the client side).

JSLint.VS2010

Download: JSLint.VS2010

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

(as you can see, although the code can be run, it prompts a lot of warnings)

You can also check its online version: http://jslint.com

JQuery IntelliSense

Asp.net MVC3 project created when it already contains jQuery and jQuery intelligence prompt files, if you want to use jQuery intelligence tips for other types of projects, you can download jQuery.vsdoc 's NuGet package to achieve, but the later version of jQuery1.6 has been included in the NuGet package by default in the vsdoc file, do not need to download separately.

Image Optimizer (by Mads Kristensen)

Download: Image Optimizer

Visual Studio's extension tool Image Optimizer uses SmushIt and PunyPNG to optimize the compression of images. Running this extension under the project images folder can compress all the image files in that directory. The compression ratio is usually between 15% and 40%.

Other untested tools

JSEnhancements: similar to the JSscript Editor extension, providing outline and JavaScript/CSS highlights

CSS 3 intellisense schema

Chirpy: VS add-in for handling Js, Css, and DotLess files

ReSharper 6, a tool that many developers already use, supports JavaScript and CSS (paid software).

ASP.NET MVC & HTML5 templates

Download the template for the MVC3 project through NuGet, which supports more new HTML5 elements (such as input's type new type Email,Tel,URL, etc.). It's not exactly a tool, but it's listed in this post because it's interesting.

After reading the above, have you mastered the methods of VisualStudio2010 front-end development tools and extensions and plug-ins? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.