Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
自定义emmet模板

自定义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>

参考资料

  1. 百度HTML代码规范
  2. HTML 头标签
  3. A set of custom HTML snippets for Sublime Text
  4. 百度CDN
@geekyouth

This comment has been minimized.

Copy link

geekyouth commented Apr 12, 2018

错误的格式:
image

正确的格式:
image

请问如何修改指定文件才可生成正确的缩进格式?特指html文档。。
https://www.v2ex.com/t/446105#reply4

@qLzhu

This comment has been minimized.

Copy link

qLzhu commented Jan 8, 2019

错误的格式:
image

正确的格式:
image

请问如何修改指定文件才可生成正确的缩进格式?特指html文档。。
https://www.v2ex.com/t/446105#reply4

在该有空格的地方按空格键

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.