Sublime Text 3 Emmet Html默认补充模板修改

参考引用于这里
如果你用sublime text编辑网页,选择格式为Html的时候。你只要打一个!+ tab键,你就会生成一个默认的模板:

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>

这可能不能满足平时的需求,你可能需要添加一些其它的,比如我们在head标签里的title标签下面加一行自适应的代码:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
因此我们需要自己定义一个新的模板,这个时候我们就要修改我们的emmet控件的配置的。
首先我们可以在Preferences -> Package Settings -> Emmet -> Setting - Default找到标准配置文件,其中有个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'>"
// }
// }
}

这里就可以修改和定义我们的Html片段,但是这是默认的,我们尽量不要去修改,以免污染标准的配置文件。但我们可以修改用户的配置文件。位置在Preferences -> Package Settings -> Emmet -> Setting - User。打开文件添加代码:

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']"
}
}
}
}

上面我们定义三个html模板,一个是默认的示例模板example,还两个是自己定义的mydoc和!!,这个都是可以修改的,你习惯用什么代替就用什么代替,输入的时候打上你自己定义的名字 然后按tab就可以显示你自己定义的模板。

这个是我自己修改的模板:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
// Custom snippets definitions, as per https://github.com/emmetio/emmet/blob/master/snippets.json
"snippets": {
"html": {
"snippets": {
"myviewport": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"default-css": "<link rel=\"stylesheet\" href=\"style.css\">"
},
"abbreviations": {
"example": "<div class='example' title='Custom element example'>",
"mydoc": "html>(head>meta[charset='utf-8']+title{${1:Document}}+myviewport+default-css)+body",
"!!": "mydoc[lang='en']",
}
}
}
}

当我输入!! + tab时,默认的模板是这个样的:

1
2
3
4
5
6
7
8
9
10
11
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>

</body>
</html>

这里你会看到我还加了一个snippets,这个是添加Html的代码片段,分别名为myviewport和defult-css。这个可以在我们定义模板的时候用到,也可以在书写Html的时候,直接输入名称+tab 使用。

0%