HTML generation from CSS selectors

[adam-lynch]

I just came across Emmet. It would be really cool if this could be integrated into Brackets or something similar was achievable.

It translates stuff like:

#page>div.logo+ul#navigation>li*5>a{Item $}

into:

<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>

[redmunds]

Hi Adam,

This looks pretty cool. Let me know if you would like to try to write an extension for Brackets with this functionality and I can help get you going.

Thanks,
Randy

[pthiess]

Reviewed -- move to Trello;

[gruehle]

@DennisKehrig has started work on an Emmet plugin for Brackets: https://github.com/sergeche/zen-coding/tree/v0.7.1/plugins/brackets

[DennisKehrig]

@sergeche did, for the most part, but I worked with him a bit, indeed (see #1559)

[sergeche]

Yeah, I have a plugin for Brackets but I can’t release it because Bracket’s RequireJS lib conflicts with Emmet modules: #1495

Somebody (maybe me) should update RequireJS in Brackets.

[DennisKehrig]

I think we actually did recently...

[DennisKehrig]

Indeed: #1968

[sergeche]

Oh, great! I’ll check Emmet plugin today and if everything works as expected, I’ll release it.

[DennisKehrig]

Internally, I'm jumping up and down a bit :)

[adam-lynch]

Great! It was nice to see this unfold after creating a simple issue

[DennisKehrig]

Hey @adam-lynch, long overdue: on https://github.com/emmetio/emmet/downloads you'll find the Emmets plugin for Brackets.

To install, start Brackets, open the Help menu, click "Show Extensions Folder", open the "user" subfolder and extract the Emmet-Brackets-v1.0.zip there. Then, restart Brackets. You should now have an Emmets menu with all the options you need.

Good luck and have fun! :)

[adam-lynch]

Great! Thanks.

FYI, extracting the ZIP into that directory wasn't enough. When it extracted, it just extracted the individual files there. I needed to create an "Emmet-Brackets-v1.0" directory for it to work.

[DennisKehrig]

Ooooh, thanks and sorry! You're right of course. I was too focused on mentioning the user part because that was the most common cause for trouble when installing extensions recently. You can just rename "Emmet-Brackets-v1.0" to "emmet", though, the exact name is irrelevant.

Glad you got it to run anyway :)

[adam-lynch]

Cool, thanks.
It's great by the way... loving the keyboard shortcuts

[adam-lynch]

This doesn't work for me with Brackets 22. The shorcuts & menu actions don't do anything

[WebsiteDeveloper]

you'll have to open a bug in the emmet extension repo because some shortcuts were previously overwritten by the extension which is no longer possible as of Sprint 22.
Note: You should see several errors in the developer console when starting brackets because of that.

[adam-lynch]

@WebsiteDeveloper You're right. There's an existing issue for that. But the more interesting error is aTypeError, which I think is the cause of my problem. See brackets-emmet#10.