The sharpest Visual Studio Web development tool Extension: Web Essentials Use details _ practical tips

First, install from Extension Manager: The latest version is release 19th 2.5.

Then restart your VS development environment, and you can use the convenience features it provides.

The Web essentials provides a lot of quick support for CSS, JavaScript, and HTML, as shown in the following list:

Css

Instant Preview Live Web Preview
Every time you modify, you can use the Ctrl+alt+enter shortcut or click on the right button on the live WEB preview option to instantly preview your modified page, each time you modify the HTML or the corresponding CSS, Ctrl+s save, the Immediate window will take effect immediately.

Compatibility CSS code generation
Many CSS3 code are not compatible, different browsers have different languages, use this extension to automatically add special CSS tags, such as-moz,-webkit,-ms and-o the beginning of some CSS, you can only select a specific browser.

The production code results are as follows:

If you have already added a portion of it, the extension will only add CSS code that is not part of it and will not be added repeatedly.

Up and down arrows can change numeric values

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

Supports CSS, SaSS, less, and JavaScript files

can produce BASE64 format strings instead of URL addresses

If you refer to the background map through a URL, you can convert the reference to the Base64 format directly through the Embed resource as Base64 feature provided by the extension.

If the content is too long, you can use the folding function.

Support for shortcut key annotations and anti-annotation code

You can use the Ctrl+k, CTRL + C annotation or ctrl+k, ctrl+u the reverse annotation code, and the shortcut keys used in C # programming in VS.

TODO Annotation Special support

Any comment that includes the TODO keyword will display a special gray marker on the left to prompt you that the part is not finished.

Color Preview

When you move the mouse over 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 needed, and the right mouse button can be seen surround with region to fold the code.

After feature selection, it automatically navigates to the default myregion name, 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

Current support for {},[], () match.

Compress code

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

Code Folding

Support drag

Support for pictures and font drag, for example, if you drag a tomxu.jpg picture to the CSS selector, the following code will be generated automatically (the font is similar):

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

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

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

Supports region folding

#region Myregion

function Example () {

}

#endregion

Support for code folding

Bracket Matching

Current support for {},[], () match.

Same word highlighting

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

Compress code

Use the Ajaxmin library to compress the code, not only to compress it, but also to use a confused, bull!

Quick Add Files

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

Html

Support for drag-and-drop of user controls

When we were developing asp.net webform, a connection was automatically generated when we dragged the user control to an ASPX page or template container with the mouse, and when this extension was used, the named controls were automatically registered and then generated with the <uc:name/ > code, you can directly use the slightly.

Supports drag and drop of video and audio files

also supports the drag and drop of audio and video files.

This is the sharpest visual Studio Web development tool Extension: Web Essentials use 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.