According to the Emmet docs at http://docs.emmet.io/cheat-sheet/ the code "ul>.class" should expand to:

<ul>
    <li class="class"></li>
</ul>

However with WebEssentials 2012 this expands to:

<ul>
    <div class="class"></div>
</ul>

Adding an DIV element to an UL element is invalid and doens't really make sense.

The pix command for LoremPixel also allows additional attributes. The following command:

pix[alt="tags here" title="picture title" data-foo="bar"]

should generate:

<img src=\"http://lorempixel.com/420/200/sports/5/MyText/\" alt=\"tags here\" title=\"picture title\" data-foo=\"bar\" />

Currently, its generating:

<img src=\"http://lorempixel.com/30/30/\" alt=\"tags\" here'=\"\" title=\"picture\" title'=\"\" data-foo=\"bar\" />

Looks like the attribute value is also splitting on whitespace.

When I press tab button after div>, i get tab space

Hi,

Does ZenCode allow Boolean Attributes?

As described in this Emmet forum post:
http://stackoverflow.com/questions/14630725/does-emmet-allow-boolean-attributes

I am currently running Visual Studio 2013 with Web Essentials and wonder if i can enable this feature.

Example shortcode / ZenCode:
input.form-input-text[placeholder="Enter text here" required.]

Outputs HTML:
<input class="form-input-text" placeholder="Enter text here" required.="">

But i would like it to output this HTML (with a clean "required"):
<input class="form-input-text" placeholder="Enter text here" required>

(as emmet renders it since they allow boolean attributes, utilizing a trailing dot)

Best regards,

Tobias

Currently abbr is expanded to acronym which isn't a supported tag in html5.

In VS 2012 I get proper expansion of non-nest divs vertically. But in VS 2013 they expand all on one line.

this code expands

.messages>.message>(.title>lorem5)+.date+.contents+.toolbar+.replies 

to:

<div class="messages">
<div class="message">
    <div class="title">
        Lorem ipsum dolor sit amet.
    </div><div class="date"></div><div class="contents"></div><div class="toolbar"></div><div class="replies"></div>
</div>
</div>

Please make sure about one more thing

When I do

input[type='button']

It must be only have double quote of single quote one time.

ZenCoding in WebEssentials doesnt support the @ derective. @ increments the index of $ derective. For example,

.box$$@4*3

Result

< div class='box4'>
< div class='box5'>
< div class='box6'>

E.g. I type i.fa, hit tab and all I get is a 4 spaces. No expansion.

There is no mention of it in Options as well. Is it supported for VS 2015?

Lorem Pixel for prototype images ( #5 ) is a really useful feature.
In some case, we have to put clean image as Placehold.it does.
Is it possible to integrate this? APIs are quite close.

Maybe the most valuable improvement which can be done here is to allow custom "protocol"?

When using ZenCoding in Visual Studio 2013, this code:

ul>li*3>lorem3

expands to this HTML:

<ul>
  <li>Lorem ipsum dolor.
  </li>
  <li>Lorem ipsum dolor.
  </li>
  <li>Lorem ipsum dolor.
  </li>
</ul>

What I would hope it would expand to (and saw on a video on Channel 9) is this:

<ul>
  <li>Lorem ipsum dolor.</li>
  <li>Laborum suscipit sed.</li>
  <li>Blanditiis quis quae!</li>
</ul>

I've been looking at the code, and something similar to this seems to be in, as

lorem3*3

does expand to

Lorem ipsum dolor.
Sit amet, consectetur.
Adipiscing elit fusce.

Would it be possible to implement this (if only as an option)? Or is it me who's overlooking something obvious.

ZenCoding has to output the same HTML as you would write yourself. Adding newlines before each element and text string is totally overkill. I can't use ZenCoding like this.

Only block elements should have a newline before it. Not etc. and not {text} either.

That was the entire reason for having the BlockElementControl

Hey,

I try to type 'ui-segment' + TAB, it does not generate the <ui-segment></ui-segment>. I think you should work like the VS Code, where in HTML editor, any TAB with something before is an element. ;)

I saw this example in the feature suggestion page:
div>(div>div)>div

Although this clearly fails compiling in the current grouping implementation it makes me wonder if the snippet makes sense at all.
Investigating Emmet I see that the same snippet has a result, but not a correct one as it produces the equivalent of this:
div>(div>div)+div

It seems that what the original snippet intends to do is invalid since It's trying to add a child to a group. This can lead to ambiguity since developers might be confused as to where exactly in the group will the child be added. Some developers might think the child is added to the 'deepest' element in the group while others might think that it adds as a sibling instead of a child (as Emmet does).

Either way, if this is specification, I believe it to be ambiguous and error prone.

INFO: This was previously created here: madskristensen / WebEssentials2013 #568 and was reacreated by request.

Taking the first example from here: http://www.johnpapa.net/zen-coding-in-visual-studio-2012/

ul[data-bind="foreach:customers"]>li*4>span{Caption $$}+input[type=text data-bind="value:$$"]

Inside each li item there should be a span and an input elment. Trying this I get:

    <ul data-bind="foreach:customers">
        <li>
            <span>aption 01</span>
            <input type="text" value="" data-bind="value:01" />
        </li>
        <li>
            <span>Caption 02</span>
        </li>
        <li>
            <span>Caption 03</span>
        </li>
        <li>
            <span>Caption 04</span>
        </li>
    </ul>

So only the first element has both children.

Tried it with VS2013SP1 Prof. + Web Essentials 1.7.2

Please import the latest bits to WE2012 repo.

I love Web essentials, generally, but I have a few problems with this implementation of Emmet.
First is this, and I'm not the first to notice it.

I'm currently using the 2013 implementation; I'm not sure if 2015 is also affected.

So, when multiplying something, like .panel.panel-$*3 one should get the following when expanded:

<div class="panel panel-1"></div>
<div class="panel panel-2"></div>
<div class="panel panel-3"></div>

Sometimes this works, sometimes it doesn't. The above example would work, as would a few others I could come up with.

Let me walk you through how to break it, at least one way.

div#loading.loading-screen[style="display:none;"]>h1#loadingTitle{Please wait}+p#loadingDescription{while we load this for you}+.spinner.spinner-lg>.spinner-container.spin-container$*3

expands to this:

    <div id="loading" class="loading-screen" style="display:none;">
        <h1 id="loadingTitle">Please wait</h1>
        <p id="loadingDescription">while we load this for you</p>
        <div class="spinner spinner-lg">
            <div class="spinner-container spin-container1"></div>
            <div class="spinner-container spin-container2"></div>
            <div class="spinner-container spin-container3"></div>
        </div>
    </div>

That works just fine. Now, I actually need 4 <div>s in each of those .spin-containers to make my CSS-based loader work, so if I modify it to this:

div#loading.loading-screen[style="display:none;"]>h1#loadingTitle{Please wait}+p#loadingDescription{while we load this for you}+.spinner.spinner-lg>(.spinner-container.spin-container$>(.circle$*4))*3

expands to this:

    <div id="loading" class="loading-screen" style="display:none;">
        <h1 id="loadingTitle">Please wait</h1>
        <p id="loadingDescription">while we load this for you</p>
        <div class="spinner spinner-lg">
            <div class="spinner-container spin-container1">
                <div class="circle1"></div>
                <div class="circle2"></div>
                <div class="circle3"></div>
                <div class="circle4"></div>
            </div>
            <div class="spinner-container spin-container1">
                <div class="circle1"></div>
                <div class="circle2"></div>
                <div class="circle3"></div>
                <div class="circle4"></div>
            </div>
            <div class="spinner-container spin-container1">
                <div class="circle1"></div>
                <div class="circle2"></div>
                <div class="circle3"></div>
                <div class="circle4"></div>
            </div>
        </div>
    </div>

And there's the strange bit: now the inner-most item numbering works, but the outermost doesn't.

If anyone else has another example of how to break this, it'd be good to list them here, although I'm sure a lot of people have trouble finding this repo, considering the low watch count and such on a project being used by so many people.

Anyway, thanks for your time, and I really love the project.

Typing div.content then hitting tab, will result in div.<content></content>. The same goes for div#foobar, etc.

I have tried disabling other plugins, uninstalling/reinstalling Web Essentials, and uninstalling/reinstalling Zencoding.