Dreamweaver CC 2017 now supports "Emmet Abbreviations"

Question

This is really cool and very handy.Emmet is a plug-in that allows high-speed coding and generation of HTML and CSS code.Use Emmet abbreviations in Code View or Code Inspector in Dreamweaver and press the Tab key to expand these abbreviations into HTML markups or CSS.HTML abbreviations expand in HTML and PHP pages (it works in CFML pages too). CSS abbreviations expand in CSS, LESS, SASS, SCSS pages, or within the style tag in an HTML page.Here are a few examples that demonstrate how you can use Emmet abbreviations in Code View. For detailed information and reference, see the Emmet documentation.Links:Write and edit code in DreamweaverEmmet Abbreviations

Jon Fritz · Accepted Answer

Emmet has been built into DW for some time now, it was introduced in CC2015.

It is also problematic for some people and comes into conflict with the new "Keyword Shortcuts" for Snippets (introduced in CC2017) if the keyword used also happens to be an Emmet abbreviation, the Snippet takes precedence.

For example, I have a snippet set up to create Æ where I can now type ae+Tab, unfortunately, this set up destroys Emmet's CSS ae+Tab abbreviation for

-ms-align-items:flex-end;
align-items:flex-end;

I have a feeling there are going to be a fair number of Emmet users who end up completely ignoring the Snippet Keywords all together. After all, double clicking the Snippet is going to be faster than typing in long words needed to stay out of conflict with all of Emmet's abbreviations when hitting the Tab key.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded