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

This article introduces the relevant knowledge of "what are the web front-end development tools". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Web Standards Update for Visual Studio

Download: Web Standards Update for Microsoft Visual Studio 2010 SP1

This is a * extension I recommend for editing HTML5, CSS3 and JavaScript code, developed by Microsoft 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 * *). 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).

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 highlighting

◆ 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.

This is the end of the content of "what are the web front-end development tools". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.