The Sharpest VS Web development tool Extension: Web Essentials Explained

Original address: http://developer.51cto.com/art/201111/303492.htm

Web Essentials is the best vs extension tool you've seen so far, so please wait for me one by one.

First, install from Extension Manager: The latest version is the 2.5 version released in 19th.

Then restart your VS development environment and you'll be able to use the handy features it provides.

Web Essentials provides a lot of quick and easy support for CSS, JavaScript, and HTML, and the list is as follows:

Css

Instant preview of Live Web previews

Every time you make a change, you can use the Ctrl+alt+enter shortcut or click the Live WEB Preview option on the right of the program to instantly preview your modified page, each time you finish modifying the HTML or the corresponding CSS, ctrl+s the instant window will take effect immediately after saving.

Compatibility CSS code generation

Many CSS3 code is not compatible, different browsers have different languages, using this extension can be enhanced to automatically add special CSS tags, such as-moz,-webkit,-ms and-o Some of the beginning of the CSS, can only select a specific browser.

The production code results are as follows:

If you have already added a portion, the extension will only add CSS code other than this part, and it will not be added again.

Up and down arrows can change numeric values

When you put a keyboard prompt behind a number or a number, such as 5px, 25%, 0.6em, 23, etc., you can use Ctrl+up or ctrl+down to increase or decrease the value.

Support for CSS, SaSS, less and JavaScript files

can produce Base64 formatted strings instead of URL addresses

If you refer to a background map by URL, you can convert the reference to Base64 format directly from the EMBED resource as Base64 function provided by the extension.

If the content is too long, you can use the collapse feature.

Support for shortcut key comments and anti-comment codes

You can use Ctrl+k, CTRL + C comments or ctrl+k, ctrl+u anti-comment Code, and the shortcut keys used in C # programming with VS.

TODO Comments Special support

Any comment that includes the TODO keyword will display a special gray mark on the left to remind you that the section is not yet complete.

Color Preview

When the mouse moves to the color, you can preview the color change, or you can preview the color directly in the CSS editor.

Font Preview

Picture preview

Folding function

A life selector is required, and the code can be collapsed by right-clicking to see the surround with region.

After the feature is selected, it automatically navigates to the default myregion name there, allowing you to modify the name of your own collapsed outline.

Character sorting

When you click any selector, you can sort the CSS definition for that selector.

Bracket Matching

Currently supports the matching of {},[], ().

Compress code

The extension uses the Ajaxmin library to compress the CSS code.

Code Folding

Support Drag and drop

Supports drag-and-drop of images and fonts, for example if you drag a tomxu.jpg image to the CSS selector, the following code is automatically generated (the font is similar):

1. Background-image:url ('.. /tomxu.jpg ');

Colors can be converted directly to each other in 16, RGB, and name

You can define only which browser versions are supported on the selector

You can define only which browser versions are supported in CSS syntax

Javascript

Support for Region folding

1. #region Myregion
3. function Example () {
5. }
7. #endregion

Support for code folding

Bracket Matching

Currently supports the matching of {},[], ().

Same word highlighting

In all the code of a file, if you choose a variable, all the same variables in that code will be highlighted, as in C #.

Compress code

Using the Ajaxmin library to compress the code, not only compressed, but also used the confusion, cow!

Quick Add File

In the solution, add new items, you can directly choose to add JavaScript files or stylesheet files, convenient!

Html

Support for user control drag and drop

We used to automatically generate a connection when we dragged the user control to the ASPX page or the template container directly with the WebForm when we developed the ASP, and after using this extension, the named control was automatically registered and then generated with the <uc:name/ The > code can be used directly.

Support for video and audio file drag and drop

Supports drag-and-drop of audio and video files.

Original: http://www.cnblogs.com/TomXu/archive/2011/11/22/2258849.html

The Sharpest VS Web development tool Extension: Web Essentials Explained