How to get Emmet working on Dreamweaver

Question

Emmet now support Dreamweaver and am keen to work with it but it's not working for me, even though I think I have followed instructions here https://github.com/emmetio/dreamweaver

I have already downloaded and installed the extension using Adobe Extension Manager.

One the thing am not sure about is the absolute path to extentions folder that am suppose to put in Commands > Emmet > Emmet Preferences. I have put this in C:\Program Files\Adobe\Adobe Extension Manager CS6

Any help is very much appreciated.

Thanks

Answer 1

Got it to work with the Tab. I use DW CS6 in code view to program and was happy to know that it was available for DW. Unfortunately as @Andy says, it doesn't quite work out of the box.

First of all, in DW the Ctrl+E shortcut is used for the "Tag choose" window. The next thing is that Tab doesn't work out of the box like it does with other IDE's.

After a little experimentation focused on making the Tab key work for expanding the abbreviation I did this:

I wrote the word Tab somewhere and I copied it to my clipboard, went to the Edit > Keyboard Shortcuts > Commands > Emmet > Expand Abbreviation preference and I right clicked in the "Press key:" field at the bottom and pasted the word Tab in there, then I clicked on Change and then OK and now my Tab works to Expand Abbreviation.

Lot of people might find it as a big down side that now the Tab key won't really tab anymore, but I think it's ok for me because I like to use Double Space indentation and I don't use the Tab because different IDE's read it with more or less spaces so the code sometimes gets a little crooked when saved from IDE to IDE.

Last but not least... I also tried doing the ASCII code for the Tab which is actually 	 but that didn't seem to work.

Hope this answer is also helpful for anyone who wants to use the Tab and doesn't mind that it will only work to Expand Abbreviation.

Answer 2

Create a new Keyboard Shortcut set for Emmet

By default, the Ctrl+E shortcut is set up for Dreamweaver's Tag Chooser, which supercedes Emmet's Ctrl+E shortcut. We'll fix this by removing the keyboard shortcut for the Tag Chooser.

1. Go to Edit > Keyboard Shortcuts…
2. Under Current set, choose Dreamweaver Standard (selected by default if you haven't changed it) or another preferred set.
3. Click on the Duplicate set button on the right. (You can't simply edit the default set).
4. Rename the set. (ex. "Dreamweaver for Emmet")
5. In the Commands window, go to Insert > Tag…
6. Remove Ctrl+E from the Shortcuts window by clicking the - button.
7. Click OK.

Now the Ctrl+E keyboard shortcut is freed up to work for Emmet's Expand Abbreviation command.

If desired, you may also change the shortcut for Expand Abbreviation:

In the Keyboard Shortcuts edit window, with your newly created set selected, navigate to Commands > Emmet > Expand Abbreviation. Press the key combination you would like to use.

Alternatively, you can type a key or key combination into a text editor (ex. literally type Tab or Ctrl+E), copy it, then paste it in the Press key text field by right-clicking and choosing paste. If you try to paste with Ctrl+V, it will record Ctrl+V as the shortcut.

Answer 3

it work for me but with 'ctrl+E' shortcut key.

please , go to edit->keyboard shortcuts , command = menu commands and go to insert->tag you should eliminate this shortcut (with click on minus sign).

now if you press 'ctrl+E' emmet work for you and html tag will be automatically compelete .

Answer 4

I'm using a Mac and can not for the life of me find the Emmet folder or extension folder anywhere.

So I created my own and linked absolutely to them without success.

EDIT:

Got it figured out: In Dreamweaver on the Mac you can specify whatever folder you want to create and store your own custom preferences.json file.

E.G. In my case I created a folder called 'extensions' and placed it at the following location: /Applications/Adobe Dreamweaver CS5/Configuration/extensions With this folder I created my own preferences.json and linked to this in Dreamweaver via the menu: Commands > Emmet > Emmet Preferences. Emmet automatically uses these files to override the defaults.

The content of this file is:

{
    "css.valueSeparator": ":"
}

Answer 5

To get Emmet "Expand Abbreviation" command to work with Tab in Dreamweaver as in other IDEs:

1. write down the word "Tab" (no quotes) in any place you can copy the text to your clipboard
2. copy the text
3. go to Edit > Keyboard shortcuts
4. if you haven't a personal preset, press the duplicate button next to the preset name and type in the name of for your preset
5. on the "Commands" dropdown box, select "Document editing"
6. scroll the command box until the bottom and select "Expand Abbreviation"
7. right click on the "Press key" field and choose "Paste" to paste the word "Tab" you've copied (note: do not press any key on this field or your can mess up your shortcuts - if you did, just hit cancel and restart from step 3)
8. click the "Change" button
9. click the "OK" button
10. be happy ;)

Ps.: this configuration allows the use of the Tab key to indent aswell as expand abbreviations.

Answer 6

I did install emmet on Dreamweaver CS6 with Windows7.

The path I entered was:

C:\Users\your user name\AppData\Roaming\Adobe\Dreamweaver CS6\en_US\Configuration\Commands\Emmet

In the example above you have to fill in (your user name)

Once that was done I had to change the Shortcut for emmet expand abbreviation from ctrl+E to ctrl+Q

Once that was done emmet/Dreamweaver worked similar to emmet/Sublime text 2. I still prefer to use the tab key to expand the abbreviation in Sublime, but could not find a way to set that up in Dreamweaver.