Customizing Your Emmet Settings

中文标题：Emmet 中修改和添加自定义的快捷代码段（Snippet）

Emmet 提供了许多自定义的 snippets，在 snippet.json 文件中可以找到所有。

如果我们想修改这些内置的 snippets，我们在该文件中修改即可。

不过，上述直接修改源文件的方法有个缺点，就是污染源文件，而且配置不可迁移（迁移这些设置到新的机器上非常不方便）。

我们可以通过 Emmet 提供的设置文件（Emmet.sublime-settings）来设置，这样更干净，而且可定制性更高：

注：如果 Preferences > Package Settings 里面没有出现 Emmet，那么我们可以在 Package Resource Viewer 中进行修改。

修改方式：

{
    "variables": {
        "lang": "en",
        "charset": "UTF-8"
    },
    // Custom snippets definitions, as per https://github.com/emmetio/emmet/blob/master/snippets.json
    "snippets": {
        "html": {
            "snippets":{
                "myviewport": "\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n",
            },
            "abbreviations": {
                "example": "<div class='example' title='Custom element example'>",
                "mydoc": "html>(head>meta[charset='utf-8']+title{${1:文档标题}})+body",
                "!!": "!!!+mydoc[lang='zh-Hans']"
            }
        },
        "css": {
            "snippets": {
                "@i": "@import url(|);",
                 "pos": "position:${1:relative};",
                 "pos:a": "position:absolute;",
                 "d:b": "display:block;",
                 "pt": "padding-top:|;",
                 "c": "color:#${1:000};"
            }
        }
    }
}

解释：
最外层 variables 定义全局变量，可通过 ${} 来引用。
根元素 snippets 下的 html, css 是指文件类型，
内层的 snippets {} 和 abbreviations {} 本质上都是定义了一段代码块，
abbreviations 就是缩写的意思，snippets 可以被 abbreviations {} 中直接引用。
并且，abbreviations {} 中的各项也可互相引用，比如：

全文完！