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

This article is to share with you about how to use Web Essentials. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

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

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

Web Essentials provides a lot of quick feature support for CSS, JavaScript and HTML, which are listed below:

CSS

Instant Preview Live Web Preview

Every time you modify it, you can use the CTRL+ALT+Enter shortcut key or click the Live Web Preview option on the right button of the solution to preview your modified page instantly. Every time you modify HTML or the corresponding CSS, Ctrl+S saves, the instant window will take effect immediately.

Compatibility CSS code generation

Many CSS3 codes are incompatible, and different browsers have different languages. Using this extension, you can automatically add special CSS tags through promotion, such as some CSS starting with-moz,-webkit,-ms and-o, and only specific browsers can be selected.

The result of the production code is as follows:

If you have already added part of it, the extension will only add CSS code other than this part, and will not repeat it.

The up and down arrows can change the numerical value

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

Support for CSS, SaSS, LESS and JavaScript files

You can produce strings in Base64 format instead of URL addresses

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

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

Support for shortcut key comments and anti-comment code

You can use CTRL+K, CTRL+C comments or CTRL+K, CTRL+U to uncomment code, just like the shortcuts used in C # programming in VS.

Special support for TODO comments

Any comments that include the TODO keyword will display a special gray mark on the left to remind you that the section is not finished yet.

Color preview

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

Font preview

Picture preview

Folding function

Need a life selector, right-click to see Surround With Region to collapse this code.

After the function is selected, it will automatically navigate to the default MyRegion name, allowing you to change the name of your folding outline.

Character sort

When you click on any selector, you can have the CSS definition of that selector sort

Parenthesis matching

The matching of {}, [], () is currently supported.

Compressed code

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

Code folding

Support drag and drop

Drag and drop of images and fonts are supported. For example, if you drag a tomxu.jpg image to the CSS selector, the following code will be automatically generated (the font is also similar):

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

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

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

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

JavaScript

Support for Region folding

/ / # region MyRegion

Function Example () {

}

/ / # endregion

Support for code folding

Parenthesis matching

The matching of {}, [], () is currently supported.

The same word highlights

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

Compressed code

Use AjaxMin library to compress the code, not only compress, but also use confusion, Niu!

Quick add Files

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

HTML

Support for drag and drop of user controls

In the past, when we were developing in asp.net webform, we automatically generated a connection when we dragged user control directly to the aspx page or template container with the mouse. After using this extension, we will automatically register the named control, and then generate the code with it, which can be used directly.

Support for drag and drop of Video and Audio files

Drag and drop of audio and video files is also supported.

Thank you for reading! This is the end of the article on "how to use Web Essentials". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

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.