While reading my blog I have realized that my last post in English was in 2012, so I think it is time to write another one. This time I will write about Web Essentials, an open-source Visual Studio extension, and Zen Coding (renamed Emmet).
Web Essentials extends Visual Studio with a lot of new features for web developers. One of my favorite features is Zen Coding, a set of shortcuts that allows you to code HTML and other structured code format significantly faster.
How does it work?
First, you need to install it from the Visual Studio Gallery (there are versions for Visual Studio 2012 and Visual Studio 2013). Now you can start!
Open or start a new Web or JS Windows Store project and go into a HTML file. The core of this is an engine which allows you to expand expressions into HTML code. For example:
div#top>div.logo+ul#navigation>li*5>a{Item $$}
…can be expanded to:
<div id="top"> <div class="logo"></div> <ul id="navigation"> <li><a href="">Item 01</a></li> <li><a href="">Item 02</a></li> <li><a href="">Item 03</a></li> <li><a href="">Item 04</a></li> <li><a href="">Item 05</a></li> </ul> </div>
What? Let’s try with something simple. Type
div
now hit the <Tab> key and you get
<div></div>
Now try this followed by the <Tab> key
ul>li.item
becomes
<ul> <li class="item"></li> </ul>
Now lets write a table
table#schedule>tr*2>td*3
you get
<table id="schedule"> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table>
Special abbreviations such as html5, lorem, $, table+, ul+, ol+ and dl+ greatly reduce typing time.
html5
is expanded to
<!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html>
The last example
select>option#item-$*3>lorem3
becomes
<select> <option id="item-1"> Lorem ipsum dolor. </option> <option id="item-2"> Sit amet, consectetur. </option> <option id="item-3"> Adipiscing elit fusce. </option> </select>
If you want to know more about these shortcuts, you can check the Zen HTML Selectors.
Happy coding! 🙂
Blog de Karlitoz 