Home Download Buy Blog Forum Support

Emmet : Delete or modify snippet for HTML5

Emmet : Delete or modify snippet for HTML5

Postby skube on Mon Feb 11, 2013 8:37 pm

Hi, I'm wondering how one goes about modifying the snippet when using Emmet and the bang (!) + TAB. This will output a snippet with a basic HTML5 doctype and structure. I can't find where this snippet is saved and I can't seem to overwrite the snippet with one of my own.

Anyone know?

thanks!
skube
 
Posts: 86
Joined: Tue Feb 28, 2012 8:42 pm

Re: Emmet : Delete or modify snippet for HTML5

Postby prmaple on Tue Feb 12, 2013 12:41 am

Packages\Emmet\emmet\snippets.json

Code: Select all
"html":{
    ...
    "abbreviations":{
        "!": "html:5",
        ...
        "html:5": "<!doctype html>\n<html lang=\"${lang}\">\n<head>\n\t<meta charset=\"${charset}\">\n\t<title>${1:Document}</title>\n</head>\n<body>\n\t${child}${2}\n</body>\n</html>"
    }
}
Find me
HTML5 Games: SNAKE! Tetris!
prmaple
 
Posts: 77
Joined: Sun Dec 25, 2011 11:06 am
Location: Melbourne

Re: Emmet : Delete or modify snippet for HTML5

Postby serge.che on Tue Feb 12, 2013 9:31 am

This snippet is defined in plugins’ snippets.json file: http://docs.emmet.io/cheat-sheet/

To override it, read http://docs.emmet.io/customization/
In Sublime Text, you can put your own snippets into Users’ Emmet.sublime-settings, like this: https://github.com/sergeche/emmet-subli ... ttings#L77
serge.che
 
Posts: 6
Joined: Fri Nov 09, 2012 9:57 am

Re: Emmet : Delete or modify snippet for HTML5

Postby skube on Tue Feb 12, 2013 7:37 pm

Great! Thanks guys.

I have one more question that is more about snippets in general. When using a snippet, you have these "tab stops" (i.e. ${1:something} ) for areas you want to jump to. It seems that Emmet doesn't fire until you have gone through all the tab stops.

For example, if I hit "! TAB" I get the following (obviously without the [tab stops]):
Code: Select all
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>[Document]</title>
</head>
<body>
    [tab stop]
</body>
</html>[tab stop]

If I jump to the second tab stop and then type "ul>li TAB" nothing happens because I'm still in snippet population mode. This is shown as being in "Field 2 of 3" in the status bar. I have to hit TAB 3 times, then jump back to the body and try the Emmet expansion once more for it to work.

Am I doing something wrong?
skube
 
Posts: 86
Joined: Tue Feb 28, 2012 8:42 pm

Re: Emmet : Delete or modify snippet for HTML5

Postby prmaple on Wed Feb 13, 2013 1:55 am

skube wrote:Great! Thanks guys.

I have one more question that is more about snippets in general. When using a snippet, you have these "tab stops" (i.e. ${1:something} ) for areas you want to jump to. It seems that Emmet doesn't fire until you have gone through all the tab stops.

For example, if I hit "! TAB" I get the following (obviously without the [tab stops]):
Code: Select all
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>[Document]</title>
</head>
<body>
    [tab stop]
</body>
</html>[tab stop]

If I jump to the second tab stop and then type "ul>li TAB" nothing happens because I'm still in snippet population mode. This is shown as being in "Field 2 of 3" in the status bar. I have to hit TAB 3 times, then jump back to the body and try the Emmet expansion once more for it to work.

Am I doing something wrong?


You are not doing anything wrong. It's just a priority thing.
I overrode this snippet with the same one but without the very last tab stop. So it works nicely for me.
Find me
HTML5 Games: SNAKE! Tetris!
prmaple
 
Posts: 77
Joined: Sun Dec 25, 2011 11:06 am
Location: Melbourne

Re: Emmet : Delete or modify snippet for HTML5

Postby skube on Wed Feb 13, 2013 3:57 pm

But that's the thing, the last tab stop is not explicitly stated. I didn't put it in, it just always will jump to the very end (after the /html) - even if I have no tab stops defined.
skube
 
Posts: 86
Joined: Tue Feb 28, 2012 8:42 pm

Re: Emmet : Delete or modify snippet for HTML5

Postby prmaple on Wed Feb 13, 2013 10:15 pm

skube wrote:But that's the thing, the last tab stop is not explicitly stated. I didn't put it in, it just always will jump to the very end (after the /html) - even if I have no tab stops defined.


I have this in my User/Emmet
snippets.json

Code: Select all
{
   "html": {
      "filters": "html",
      "snippets": {
         "html:5": "<!doctype html>\n<html lang=\"${lang}\">\n<head>\n\t<meta charset=\"${charset}\">\n\t<title>${1:Document}</title>\n</head>\n<body>\n\t${child}$0\n</body>\n</html>"
      }
   }
}


The $0 handles this. $0 was not implemented a while ago, until I reported it as an issue.
https://github.com/sergeche/emmet-sublime/issues/121
Now it just works like Sublime snippets.
Find me
HTML5 Games: SNAKE! Tetris!
prmaple
 
Posts: 77
Joined: Sun Dec 25, 2011 11:06 am
Location: Melbourne

Re: Emmet : Delete or modify snippet for HTML5

Postby skube on Thu Feb 14, 2013 6:29 pm

Sweet thanks! Exactly what I was looking for.
skube
 
Posts: 86
Joined: Tue Feb 28, 2012 8:42 pm


Return to General Discussion

Who is online

Users browsing this forum: Google [Bot], lukasbob and 26 guests