自定义Emmet代码块

来源：互联网发布：打印机排版软件编辑：程序博客网时间：2024/06/05 08:51

- 简单介绍
- 开始
  - 找到要修改的文件
  - 添加自己的代码片段
  - 缩略写法abbreviations
- 结束给个现成的
- Emmet官网的一些链接

简单介绍

Emmet写html的时候，在新建的文件内输入！（感叹号）然后按 TAB键（有的是Ctrl+E），就能生成如下片段：

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

可是内容太少，想要更偷懒就必须先麻烦自己自定义一下。
*本文以window下的sublime为例。

开始

1.找到要修改的文件

在编辑器插件目录下找到相应json文件:snippets.json
（不想看，想直接用的点这里。）

X:…\Sublime\Data\Packages\Emmet\emmet\snippets.json

打开后可以在672行看到如下代码（按理来说位置都一样，不排除可能有偏差）

    "html": {                 //snippets.json内第672行        "filters": "html",    //snippets.json内第673行        "profile": "html",        "snippets": {        //这里的内容会按原样输出        "!!!":    "<!DOCTYPE html>",        "!!!4t":  "<!DOCTYPE HTML PUBLI...",//太长省略..        "!!!4s":  "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4...

已知输入相应的键名！！！4s会输出< !DOCTYPE HTML PUBLIC \”-//W3C//DTD HTML 4…

2.添加自己的代码片段

在”snippets”这个键名下的值，您可以输入任何内容，并按原样输出。

注意：
1.键名不要重复
2.冒号需要转义（加反斜杠\）
3.输出的内容换行输入\n
4.空格会直接输出
5.别忘了在最后加个,（逗号）

栗子：

"!!": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">\n  <meta name=\"viewport\" content=\"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0\">\n  <meta name=\"keywords\" content=\"your keywords\">\n<meta name=\"description\" content=\"your description\">\n  <title>Document</title>\n  </head>\n<body>\n</body>\n</html>",

输入两个感叹号（！！）按TAB键得到如下内容：

<!DOCTYPE html><html lang="zh-CN"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  <meta name="keywords" content="your keywords">  <meta name="description" content="your description">  <title>Document</title>  </head><body></body></html>

注意：这种写法比较杂乱，看着不爽，写起来也烦人，如无不适这么写也够了，更规整的可以往下看。

3.缩略写法”abbreviations”

就在之前的位置向下一点就可以看到如下键值对：

"abbreviations": {            "!": "html:5",            "a": "<a href=\"\">",            "a:link": "<a href=\"http://|\">",            "a:mail": "<a href=\"mailto:|\">",            "abbr": "<abbr title=\"\">",            "acr|acronym": "<acronym title=\"\">",            "base": "<base href=\"\" />",            .....

在“abbreviations”这个键名下进行键值对的自定义。
栗子：

"abbreviations": {            "!!":"!!!+html[lang=zh-CN]>(head>meta[charset=${charset}]+meta:vp+title)+body",

解释代码已经被定义的键名，会返回键值，所以得到< !DOCTYPE html> !!! 加号用来连接，会另起一行 + 方括号代表定义属性，得到< html lang=”zh-CN”> html[lang=zh-CN] 大于号左边会作为父节点包住右边的 > 括号内的内容会作为一个组 ( ) 表示引用charset这个键名的键值 ${charset} 默认定义的键名，返回默认的键值内容< meta name=”viewport” content=”width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0”> meta:vp 就是title和body +title+body

键名是!!两个感叹号，后面的是自定义的内容，输入双感叹号按TAB后得到以下内容：

<!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">    <title></title></head><body></body></html>

在“abbreviations”这个键名下进行键值的定义，就是对已定义的键名用+、（）、${}等进行拼接，得到键值的拼接和各种排列。

"meta": "<meta/>","meta:utf": "<meta http-equiv=\"Content-Type\" content=\"text/html;charset=UTF-8\" />","meta:win": "<meta http-equiv=\"Content-Type\" content=\"text/html;charset=windows-1251\" />","meta:vp": "<meta name=\"viewport\" content=\"width=${1:device-width}, user-scalable=${2:no}, initial-scale=${3:1.0}, maximum-scale=${4:1.0}, minimum-scale=${5:1.0}\" />","meta:compat": "<meta http-equiv=\"X-UA-Compatible\" content=\"${1:IE=7}\" />"

上面是插件内所有Meta标签的内容，并没有keywords或description，因此需要自己写。

结束，给个现成的

在”abbreviations”内插入如下代码（第689行）：

"!!": "!!!+html[lang=zh-CN]>(head>meta[charset=${charset}]+title{${1:Document}}+meta:vp+meta[http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\"]+meta[name=\"keywords\" content=\"your keywords\"]+meta[name=\"description\" content=\"your description\"]+link:favicon+link:css)+body",//偷懒直接写了keywords和description

保存后重启，输入两个感叹号或TAB或Ctrl+E

<!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="UTF-8">    <title>Document</title>    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    <meta name="keywords" content="your keywords">    <meta name="description" content="your description">    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">    <link rel="stylesheet" href="style.css"></head><body></body></html>

Emmet官网的一些链接

添加您自己的或更新现有的片段
Emmet官方API
Emmet插件下载

阅读全文

0 0