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.