The most sharp extension of Visual Studio Web development tools: Detailed description of Web essenins), studioessen

Extensions of the most sharp Visual Studio Web development tools: detailed descriptions of Web tials ins () and studioessenessen

Web Essentials is the best VS extension tool that we have seen so far. Please wait for me to describe the specific functions.

 

First, install Extension Manager: the latest version is version 2.5 released on the 19th.

Restart your VS development environment to use the convenient functions provided by it.

Web Essentials provides many quick functions for CSS, JavaScript, and HTML. The specific list is as follows:

CSS

 

Live Web Preview
During each modification, you can use the CTRL + ALT + Enter shortcut or right-click the Live Web Preview option on the solution to Preview your modified page in real time, after each HTML modification or corresponding CSS modification, after Ctrl + S is saved, the real-time window will take effect immediately.

 

Compatibility CSS code generation
Many CSS3 codes are incompatible, and different browsers have different languages. With this extension, you can automatically add special CSS tags, such as-moz,-webkit, CSS starting with-ms and-o can only be selected in a specific browser.

The production code result is as follows:

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

 

 

Up and down arrows can change numeric values

When you place a keyboard prompt on a number or after a number, such as 5px, 25%, 0.6em, or 23, you can use CTRL + UP or CTRL + DOWN to increase or decrease the value.

Supports CSS, SaSS, LESS, and JavaScript files

 

 

A string in Base64 format can be produced to replace the URL address.

If you reference the background image through the url, you can directly convert the reference to the base64 format through the Embed resource as base64 feature provided by this extension.

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

 

 

Supports shortcut key comments and reverse comments

You can use CTRL + K, CTRL + C or CTRL + K, CTRL + U to uncomment the code, which is the same as the shortcut key used for C # programming in.

 

 

Special support for TODO annotations

If any comment includes the TODO keyword, a gray special mark will be displayed on the left, prompting you that this part is not complete yet.

 

Color Preview

When you move the mouse over the color, you can preview and change the color, or preview the color directly in the CSS editor.

 

 

Font Preview

 

 

Image Preview

 

 

Fold

You need a life selector. Right-click it and you can see Surround With Region to fold the code.

After the feature is selected, it will automatically locate the default MyRegion name, allowing you to modify the name of your folding outline.

 

 

Character sorting

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

 

 

Matching brackets

Currently, matching of {}, [], and () is supported.

 

 

Compressed code

The extension uses the AjaxMin library to compress CSS code.

 

 

Code folding

 

 

Drag and Drop supported

Supports image and font dragging. For example, if you drag a tomxu.jpg image to the CSS selector, the following code is automatically generated (the font is similar ):

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

 

 

Colors can be directly converted to each other in hexadecimal format, rgb format, and name format.

 

 

You can define only the browser versions supported on the selector.

 

 

You can define only the browser versions supported in the CSS syntax.

 

 

JavaScript

Supports Region folding

//#region MyRegion

function Example() {

}

//#endregion

 

 

Code folding

 

 

Matching brackets

Currently, matching of {}, [], and () is supported.

 

 

Same-word highlight

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

 

 

Compressed code

The AjaxMin library is used to compress the code. It not only compresses the code, but also uses obfuscation!

 

 

Add files quickly

In the solution, when adding a new item, you can directly add a JavaScript file or a Stylesheet file, which is convenient!

 

 

HTML

Supports drag and drop of User Controls

In the past, when we were developing asp.net webform, we automatically generated a connection when dragging the user control to the aspx page or template container with the mouse. After using this extension, the naming control is automatically registered, and the code with <uc: name/> is generated. You can use it directly.

 

 

Supports drag and drop of Video and Audio files

You can also Drag and Drop audio and video files.