前端开发中相信大家都有各自喜欢的开发工具，个人一直使用的是sublime text，但不管用什么开发工具我们都会使用到一个插件Emmet，可以提高前端代码的编写速度。
Emmet的使用和书写语法就不做过多的介绍了，今天重点讲一下他的一个自定模板的使用。
在sublime text安装emmet插件后输入!按tab键就可以快速生成一个html5的模板如下：
1
2
3
4
5
6
7
8
9
10
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
|
这个模板我们很容易得到，但是现在移动端页面居多，针对移动端我们就需要额外的添加一些代码，这个时候是不是也希望我们按一个快捷键比如输入app再按tab就能马上出来移动端页面的模板呢？
这里我们可以实践一下。
在Preferences -> Package Settings -> Emmet -> Setting - Default中找到Emmet的配置文件，其中的snippets字段
1
2
3
4
5
6
7
8
| // 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'>"
// }
// }
},
|
然后在用户配置文件中Preferences -> Package Settings -> Emmet -> Setting - User定义自己想要的html片段：
1
2
3
4
5
6
7
8
9
10
11
12
| {
// 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']"
}
}
}
}
|
- abbreviations中左边为快捷键，后面为生成的内容;
<!-- -->和换行\n只能定义在html的snippets中,而不能定义在abbreviations中;
个人定制模板
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| {
// Custom snippets definitions, as per https://github.com/emmetio/emmet/blob/master/snippets.json
"snippets": {
"html": {
"snippets": {
"doc":"<!DOCTYPE html>",
"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": "<!-- 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": {
"app": "doc+html>(head>meta[charset='utf-8']+title{${1:文档标题}}+mycompat+myviewport)+body>jq",
"!":"doc+html>(head>meta[charset='utf-8']+title{${1:文档标题}}+mycompat+360compat+mykeywords+mydesc)+body>jq",
"jq": "<script src=\"https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js\"></script>",
}
}
}
}
|
随着不同固定项目的编写，可根据具体的项目引用常用的一些库的快捷方式非常方便。
附：SublimeText3插件安装及Emmet失效问题
