自定义Emmet代码块

最新推荐文章于 2022-02-18 16:38:17 发布

瓶子里的海怪

最新推荐文章于 2022-02-18 16:38:17 发布

阅读量1.4k

点赞数

分类专栏： sublime 文章标签：插件emmet html

本文链接：https://blog.csdn.net/csdnear/article/details/77997530

版权

sublime 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

简单介绍

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官网的一些链接

瓶子里的海怪

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
自定义Emmet代码块

自定义Emmet代码块自定义Emmet代码块简单介绍找到要修改的文件添加自己的代码片段abbreviationsEmmet官网的一些链接快捷键Markdown及扩展表格定义列表代码块脚注离线写博客浏览器兼容简单介绍Emmet写html的时候，在新建的文件内输入！（感叹号）然后按 TAB键（有的是Ctrl+E），就能生成如下片段：
复制链接

扫一扫

专栏目录