自定义emmet模板

问题复现

ST(Sublime Text)安装emmet插件后，输入!，按tab键就可以快速得到一个简易的html5模板，甚是便捷：

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

但是默认的模板可能不能满足我们的要求，例如对于简体中文网页，每次需要修改lang为zh-cmn-Hans，也比较麻烦。

因此有必要定义一个新的模板，并且输入!!命令（这个触发词可以自己定义）就可以输出我们自定义的模板。

最先想到用ST的snippet，ST有着强大的代码段自定义功能，具体的就是打开User文件夹（Preferences -> Browser Packages... -> User文件夹），然后选择一个.sublime-snippet文件进行复制，修改成自己需要的模板即可。

但是这种snippet好像无法在html中触发（原因见这里和这里）,只好另觅他方，借助Emmet来实现。

修改Emmet控件配置

可以在Preferences -> Package Settings -> Emmet -> Setting - Default找到标准配置文件，其中有个snippets字段：

// Custom snippets definitions, as per https://github.com/emmetio/emmet/blob/master/snippets.json
"snippets": {
	// "html": {
	// 	"abbreviations": {
	// 		"example": "<div class='example' title='Custom element example'>"
	// 	}
	// }
}

在这里面可以定义自己的html片段，为了避免污染标准配置文件，应在用户配置文件中修改。我们打开Preferences -> Package Settings -> Emmet -> Setting - User文件，添加如下代码：

{
    // Custom snippets definitions, as per https://github.com/emmetio/emmet/blob/master/snippets.json
    "snippets": {
        "html": {
            "abbreviations": {
                "example": "<div class='example' title='Custom element example'>",
                "mydoc": "html>(head>meta[charset='utf-8']+title{${1:文档标题}})+body",
                "!!": "!!!+mydoc[lang='zh-Hans']"
            }
        }
    }
}

上面的代码片段我们定义了两个html模板，一个为mydoc，一个为!!，其中!!引用了mydoc。

这样我们在html文件中，输入!!，按tab键，则会生成如下的文档：

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="utf-8">
    <title>文档标题</title>
</head>
<body>
    
</body>
</html>

扩展

这些html模板使用了emmet的语法，同时可以通过${}等方式来定义变量，具体的可以参考emmet默认的定义。

另外，我们写HTML文件时，有时会用到jquery，这时候就会去下载一份jquery，或者去找一个cdn版本的jquery，这都得花时间，我们可以定义一个html snippet：

"jq": "<script src='http://libs.baidu.com/jquery/1.9.0/jquery.js'></script>"

这样，以后只需要在html文件中输入jq按tab就OK了！

还有其他很多提高效率的模板，大家结合自己的习惯可以自行总结。

附录：一个完整的snippet片段以及其对应输出（好像和换行\n只能定义在html的snippets中，而不能定义在abbreviations中）

{
    // Custom snippets definitions, as per https://github.com/emmetio/emmet/blob/master/snippets.json
    "snippets": {
        "html": {
            "snippets": {
                "myfavicon": "<!-- favicon，可更改图片类型 -->\n<link rel=\"shortcut icon\" type=\"image/ico\" href=\"/favicon.ico\" />\n",
                "mycompat": "<!-- 优先使用 IE 最新版本和 Chrome -->\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\" />\n",
                "360compat": "\n<!-- 360 使用Google Chrome Frame -->\n<meta name=\"renderer\" content=\"webkit\">\n",
                "mykeywords": "<!-- SEO页面关键词 -->\n<meta name=\"keywords\" content=\"your keywords\">\n",
                "mydesc": "<!-- SEO页面描述 -->\n<meta name=\"description\" content=\"your description\">\n",
                "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:文档标题}}+360compat+mycompat+myviewport+mykeywords+mydesc+myfavicon)+body>jq+u",
                "!!": "!!!+mydoc[lang='zh-cmn-Hans']",
                "$": "<script src=\"http://libs.baidu.com/jquery/1.9.0/jquery.js\"></script>",
                "jq": "<script src=\"http://libs.baidu.com/jquery/1.9.0/jquery.js\"></script>",
                "u": "<script src=\"http://libs.baidu.com/underscore/1.3.3/underscore.js\"></script>",
                "_": "<script src=\"http://libs.baidu.com/underscore/1.3.3/underscore.js\"></script>"
            }
        }
    }
}

按键!!对应的输出如下（附带了注释，不需要的可以酌情删除）

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="utf-8">
    <title>文档标题</title>
    
    <!-- 360 使用Google Chrome Frame -->
    <meta name="renderer" content="webkit">
    
    <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    
    <!-- 开启响应式 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- SEO页面关键词 -->
    <meta name="keywords" content="your keywords">
    
    <!-- SEO页面描述 -->
    <meta name="description" content="your description">
    
    <!-- favicon，可更改图片类型 -->
    <link rel="shortcut icon" type="image/ico" href="/favicon.ico" />
    
</head>
<body>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <script src="http://libs.baidu.com/underscore/1.3.3/underscore.js"></script>
</body>
</html>

zxhfighter/emmet-snippet.md