Changing Emmet templates in Sublime?

S

sashok_sashok2014-11-05 09:50:06

HTML

sashok_sashok, 2014-11-05 09:50:06

Good afternoon!
Probably everyone knows that emmet has a wonderful ability to deploy ready-made templates. For html5 when typing ! and pressing tab expands

!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
 
</body>
</html>

I would like to replace this template with my own version. Tell me in which direction should I look?

Reply

Answer the question

In order to leave comments, you need to log in

4 answer(s)

I

Ivan Belenkov, 2014-11-05
@sashok_sashok

there should be a full map of snippets somewhere, but in principle it is possible like this:
Preferences -> Package Settings -> Emmet -> Settings - User
And there, for example:

{
    "snippets": {
        "css": {
            "abbreviations": {
                "dib": "display: inline-block;\n*display: inline;\n*zoom: 1;"
            }
        }
    }
}

And my full settings are in this path:

C:\Users\user\AppData\Roaming\Sublime Text 2\Packages\Emmet\emmet

in the snippets.json file

K

Konstantin Velichko, 2014-11-12
@Zoxon

emmet has a snippets.json file that stores mappings between shortcodes and the deployed code. You can fix it, but when you upgrade, you can lose everything.
https://github.com/sergeche/emmet-sublime/blob/mas...
But it would be more correct to write your abbreviations in the settings file. Since it has a higher priority, you can override the default abbreviations.
Example:
In the file above on line 645 the code is "!": "html:5"
This means enter ! and tab call another abbreviation html:5 on line772 "html:5": "!!!+doc[lang=${lang}]"
which pulls other snippets
"!!!": "<?xml version=\" 1.0\" encoding=\"UTF-8\"?>"
"doc": "html>(head>
So change what you want in the file Preferences → Package setting → Emmet → Settings User
For me it looks like this

{
  // Custom snippets definitions, as per https://github.com/emmetio/emmet/blob/master/lib/snippets.json
  "snippets": {
    "html": {
      "abbreviations": {
        "script": "<script type=\"text/javascript\">",
        "script:src": "<script type=\"text/javascript\" src=\"\">",
        "form": "<form action=\"${1:#}\" method=\"${2:post}\">",
        "form:get": "<form action=\"${1:#}\" method=\"get\">",
        "form:post": "<form action=\"${1:#}\" method=\"post\">",
        "a": "<a href=\"${1:#}\">"
      }
    }
  },
  // Output profiles for syntaxes
  // http://docs.emmet.io/customization/syntax-profiles/
  "syntaxProfiles": {
    // Enable XHTML dialect for HTML syntax
    "html": "xhtml"
  }
}

S

sashok_sashok, 2014-11-05
@sashok_sashok

I do not understand what it will give me?

A

Adel Khalitov, 2016-10-02
@SaveLolliPoP

so in the end there is a guide?