Custom Emmet Snippets

[wscog]

In Dreamweaver CC 2015, I could replace "Adobe\Adobe Dreamweaver CC 2015\configuration\Shared\Emmet\Emmet\snippets.js" with a customized version and Dreamweaver would recognize that file and let me use any custom snippets/abbreviations that I created.

While Dreamweaver CC 2019 has the same folder/file structure, it doesn't recognize any of my custom snippets/abbreviations.

Does anyone know of any way that I can get that working?

[Nancy OShea]

The built-in Emmet in 2019 is much like what Brackets offers.   Since 2015, DW has been fitted with a code engine based on Brackets.  So with that in mind, try poking around in the Brackets folder. 

[Paul-M]

Probably in here somewhere: C:\Program Files\Adobe\Adobe Dreamweaver CC 2019\www\extensions\default\brackets-emmet

[Paul-M · Accepted solution]

Is this what you're looking for?

C:\Program Files\Adobe\Adobe Dreamweaver CC 2019\www\extensions\default\brackets-emmet\node_modules\emmet\lib\snippets.json

[wscog]

Thank you, so much for finding that!

For any Mac users, this is the equivalent file there: Applications/Adobe Dreamweaver CC 2019/Adobe Dreamweaver 2019.app/Contents/www/extensions/default/brackets-emmet/node_modules/emmet/lib/snippets.json

You'll need to right click the app icon and click 'Show Package Contents' to find it.

Again, Paul-M, you are awesome and thank you!

[B i r n o u]

hello wscog​,

maybe you missed my question...(comment #4) so please, if you don't mind, could you tell me if the TABSTOPS support is effective under Mac, in DW, and even in your own snippets?

if so... we will know that under MAC DW has integrated EMMET correctly

if not... doesn't that bother you?

[wscog]

Last time I tried creating snippets with tabstops, I could only get the first one to work.

Having said that, I'm not overly concerned with tabstops, so I didn't put too much effort into it. I may try again in the future, but not any time soon.

[B i r n o u]

thanks for your attention...

[B i r n o u]

I take advantage of a rather technical question and oriented towards an advanced use of Emmet, to maybe understand how to use Emmet in DW.

Indeed, as far as I understand it, Emmet is not correctly integrated in DW, and despite a significant number of messages and bugs posted on the bugbase since then, no corrections have been made...

so my question, why, and especially how, to use Emmet in DW. Maybe this visual and example explanation will be more meaningful. clik the link 05.23.2019-11.51.18

don't see my question as any kind of attack... I'm just trying to understand?

folk @adobe if you're around... please take notes of it... please watch the exemple posted

[osgood_]

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

I take advantage of a rather technical question and oriented towards an advanced use of Emmet, to maybe understand how to use Emmet in DW.

Indeed, as far as I understand it, Emmet is not correctly integrated in DW, and despite a significant number of messages and bugs posted on the bugbase since then, no corrections have been made...

so my question, why, and especially how, to use Emmet in DW. Maybe this visual and example explanation will be more meaningful. clik the link 05.23.2019-11.51.18

don't see my question as any kind of attack... I'm just trying to understand?

folk @adobe if you're around... please take notes of it... please watch the exemple posted

Its not just DW that exhibits this problem, pretty much every editor does, especially in reference to the <title></title> example - Atom, VS Code, Coda, Codelobster, PHP Storm, Wappler

[B i r n o u]

osgood_  a écrit

Its not just DW that exhibits this problem, pretty much every editor does, especially in reference to the <title></title> example - Atom, VS Code, Coda, Codelobster, PHP Storm, Wappler

in fact I think you're confusing... between the TITLE tag itself and what's going on inside the TITLE tag.

if you look closely at the video I provided, it is on the word 'page' that the PAGE tag is created inappropriately (and not <title></title> as you mention in your comment).

moreover, this is a particular feature of EMMET to which I would like to draw attention, namely the TABSTOPS which are inherent to the EMMET philosophy and which allow the coders to navigate within all the abbreviation filling (once it has been deployed)

if TABSTOPS are not taken into account, it is because the code editor in question does a poor, and not complete, integration of EMMET

let's not forget that these TABSTOPS also declare themselves when creating custom snippets... hence my question in the previous message.

I can only talk about ATOM (which you mention and which I sometimes use)... the operation is the one expected...

there is however a differentiation, depending on the editors, regarding the consideration of the creation, or not, of a tag if the word preceding the support of TAB may itself be an HTML tag. some created the tag (and thus breaks navigation between TABSTOPS, others not and continues navigation between TABSTOPS. this point is debatable, but it was not the one arise with the example we were talking about

[osgood_]

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

osgood_   a écrit

Its not just DW that exhibits this problem, pretty much every editor does, especially in reference to the <title></title> example - Atom, VS Code, Coda, Codelobster, PHP Storm, Wappler

in fact I think you're confusing... between the TITLE tag itself and what's going on inside the TITLE tag.

if you look closely at the video I provided, it is on the word 'page' that the PAGE tag is created inappropriately (and not <title></title> as you mention in your comment).

I'm not confusing anything, I'm refering to what happens when you are using Emmet and hit tab, after typing text between the <title></title> tag. No editor I've tried in the list I provided jumps the cursor to the <body> | </body>, another tag is created between the <title></title> tag instead. Only Sublime puts the cursor between the <body> | </body> ....so its not just a DW issue.

We'll as sure as hell it doesn't work in Atom on Mac, as you would like.

In Mac Atom this is what you get after typing 'Test Page' in the <title></title> tag and hitting the tab key:

<title>Test <Page></Page></title>

Similarly typing 'List One 'between the <li></li> tag and hitting tab gives you the result below. It doesnt jump the cursor to the following <li> | </li>

<li class="item1">List <One></One></li>

This is Emmet default, I havent changed any settings. I haven't tested the other editors I intially listed in the previous post, but at a guess I would think they will all do the same on Mac.

[B i r n o u]

please 05.23.2019-15.03.56

[osgood_]

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

please 05.23.2019-15.03.56

Im not saying it doesnt work in Atom PC, it obviously does as shown in your video but that is not the case in the Mac Atom version.

Emmet is very 'goofy 'and I think every editor has to write it for that particular editor, so its obviously not going to function exactly the same globally/platform/editor wise. The majority of it works x-platform/editor.

In conculsion I think you might have a difficult time getting any improvement from Adobe.

[B i r n o u]

I confess I don't really understand your position. You don't seem to be using EMMET, and that's completely respectable.

others than you, they use EMMET, and find this tool very useful and fast, especially for people who only work on the keyboard.

EMMET allows wonderful things to happen.

at the beginning the comment I posted raised the question of why DW does not integrate EMMET correctly and as it should be and not to do either the apology or the trial of EMMET.

the use of ST was to demonstrate what is expected... and to compare what DW does ....

if many editors do not want to integrate EMMET correctly, it is their choice and the problem of their users. Here we are on a DW forum and the question is ... I repeat....  "why doesn't DW integrate EMMET correctly...?"  that's all...

the question was open to folks @Adobe who are present on this forum.

[osgood_]

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

I confess I don't really understand your position. You don't seem to be using EMMET, and that's completely respectable.

others than you, they use EMMET, and find this tool very useful and fast, especially for people who only work on the keyboard.

Can I suggest you learn some English translation before insulting me with your diatribe. First you say I'm confusing the issue then you say you don't understand my position. I don't have a position and I'm not confused. I'm just enlightening you to how Emmet works in many other editors since you obviously think DW is the only editor in which it doesnt work to your satisfaction.

You don't want to accept from me that it doesnt work in Atom Mac like it works for you in Atom PC.

When I say Emmet is 'goofy' I mean its obviously NOT stable from environment to environment - it doesnt function exactly the same. If you dont want to accept that then thats ingnorance. I can't do anything else to convince you other than suggest you trial it on a different platform with different editors and view the results for yourself.

Turn the question around. Why is Sublime the only editor that integrates Emmet correctly to your liking. Maybe it cant be done in other editors, maybe no-one else cares, otherwise why would editors like PHP Storm and VS Code on Mac not function as you would like, plus Atom (Mac), plus Coda, plus Codelobster(Mac)

[B i r n o u]

I'm sorry if I offended you, but I had no intention of doing so.

unlike you, I don't think EMMET is goofy. I just think that EMMET is not properly integrated by DW, who may not have correctly understood the scope of EMMET.

where I don't understand your position, is that if you reread my comment #4, the question was oriented and asked to folks @Adobe, and although I am totally open to an objective discussion as to the advantages, or not, of using EMMET when coding, since that question you only try to demonstrate what you think of EMMET integration on the code editor market.

please don't confuse.

Again, I don't expect anything from the way other code editor integrate EMMET. I am confining myself to what the official documentation says about TABSTOPS (marked in blue in the abbreviations https://docs.emmet.io/cheat-sheet) and the integration made by folks @Adobe.

[osgood_]

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

I'm sorry if I offended you, but I had no intention of doing so.

unlike you, I don't think EMMET is goofy. I just think that EMMET is not properly integrated by DW, who may not have correctly understood the scope of EMMET.

I accept that but when you have 6 out of 7 editors I've tested on the Mac and if you include DW, which I havent tested - that's 7 out of 8 of the most popular editors being used for development today which can't get Emmet right. Why, is the question and if its a big user issue I would have thought if it were an easy fix it would have been fixed.

I don't think you will get answers from Adobe. Whenever have we gotten any answers from Adobe. They are renowned for just burying their heads in the sand.

I have nothing against Emmet all Im trying to do is compare its functionality in a variety of editors. I find it odd that in Atom PC it works as you like it to work but in Atom Mac it will not. In Sublime on both PC and Mac it functions identically to the example you show in the video.

[B i r n o u]

Let's not forget that EMMET was originally developed under the name of Zen Coding. And before being deployed on various platforms, Zen Coding was a pure Sublime plugin.

so, Sublime and Zen Coding, then Sublime and EMMET... perfect integration... this is a fact.

well, now, if so many other code editors miss out on the real benefits of EMMET, don't you think of an integration work that is poorly followed by the code editors themselves.

is this due to the fact that many of the code editors you mentioned are editors mainly based on PHP... so these types of users write very little HTML, this explains that

then DW few users (no offense anyone) really code by hand and especially as soon as they code go to other solutions, so a whole type of users profile that will not form feedback to the editor about the gaps in this integration

why atom integrate it correctly under windows and not under macos ?... mistery !!!!

on the other hand, if we look at Sublime, many users are under Node, and use HTML (tagged and based on variables) and therefore need the full benefits of EMMET. hence the perfect integration

now, I think, that's not a reason for DW to reserve such a low integration of EMMET.

[osgood_]

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

Let's not forget that EMMET was originally developed under the name of Zen Coding. And before being deployed on various platforms, Zen Coding was a pure Sublime plugin.

so, Sublime and Zen Coding, then Sublime and EMMET... perfect integration... this is a fact.

well, now, if so many other code editors miss out on the real benefits of EMMET, don't you think of an integration work that is poorly followed by the code editors themselves.

is this due to the fact that many of the code editors you mentioned are editors mainly based on PHP... so these types of users write very little HTML, this explains that

then DW few users (no offense anyone) really code by hand and especially as soon as they code go to other solutions, so a whole type of users profile that will not form feedback to the editor about the gaps in this integration

why atom integrate it correctly under windows and not under macos ?... mistery !!!!

on the other hand, if we look at Sublime, many users are under Node, and use HTML (tagged and based on variables) and therefore need the full benefits of EMMET. hence the perfect integration

now, I think, that's not a reason for DW to reserve such a low integration of EMMET.

I personally don't have any answers about Emmet. To me it is what it is in various editors/platforms. I just accept it. If all functionality worked the same that would be a bonus but it's not a deal breaker for me if they don't, so long as the majority do.