Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具。Emmet 自带的 HTML 模板不适合本地开发,我们需要自定义一套自己的模板。
扩展自定义配置
打开 Sublime Text软件,菜单栏选择【Preferences - Package settings - Emmet - Settings User】,如果该文件为空,则可以直接粘贴下面的代码进去,如果不为空,则可以参考下面的代码格式,对现有配置属性进行增加。
配置项更新内容
- 调整了默认语言为
zh-CN
; - 新增了一些常用的
meta
属性; - 为
style
、script
等标签加上了type
属性; - 重写默认的
html:5
快捷属性,使其内容更完善,更符合项目开发而非练习; - 新增
!:x
快捷方法,可以快速创建 WebApp 所需的基础代码;{ "snippets": { // 变量 "variables": { "lang": "zh-CN", "locale": "zh-CN", "charset": "UTF-8" }, // HTML 模板 "html": { "abbreviations": { // 浏览器内核和渲染 "meta:compat": "<meta http-equiv=\"X-UA-Compatible\" content=\"IE=Edge,chrome=1\" />", "meta:rw": "<meta name=\"renderer\" content=\"webkit\" />", "meta:br": "meta:vp+meta:compat+meta:rw", // 站点描述和关键字 "meta:description|meta:dt": "<meta name=\"description\" content=\"\" />", "meta:keywords|meta:kt": "<meta name=\"keywords\" content=\"\" />", "meta:dkt": "meta:kt+meta:dt", // 移动端适配 META "meta:mso": "<meta name=\"screen-orientation\" content=\"portrait\" />", "meta:msox5": "<meta name=\"x5-orientation\" content=\"portrait\" />", "meta:mfdt": "<meta name=\"format-detection\" content=\"telephone=no\" />", "meta:mmth": "<meta name=\"msapplication-tap-highlight\" content=\"no\" />", "meta:mtc": "<meta name=\"theme-color\" content=\"#000000\" />", "meta:mac": "<meta name=\"apple-mobile-web-app-capable\" content=\"yes\" />", "meta:masbs": "<meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black\" />", "meta:app": "meta:mso+meta:msox5+meta:mfdt+meta:mmth+meta:mtc+meta:mac+meta:masbs", // 带 type 属性的样式表外链标签 "link": "<link type=\"text/css\" rel=\"stylesheet\" href=\"\" />", "link:css": "<link type=\"text/css\" rel=\"stylesheet\" href=\"${1:style}.css\" />", // 站点收藏图标 "link:favicon": "<link rel=\"shortcut icon\" href=\"${1:favicon.ico}\"/>", "link:xicon": "<link rel=\"icon\" type=\"image/x-icon\" href=\"${1:favicon.ico}\" />", // 带 type 属性的样式和脚本标签 "style": "<style type=\"text/css\">", "script:src": "<script type=\"text/javascript\" src=\"\">", "script": "<script type=\"text/javascript\">", // 自定义结构 "doc": "html>(head>meta[charset=${charset}]+meta:br+title{Document}+meta:dkt+link:xicon+style)+body>(script:src+script)", "html:5": "!!!+doc[lang=${lang}]", // 最简单的结构 "docSimple": "html>(head>meta[charset=${charset}]+title{Document})+body", "html:5s": "!!!+docSimple[lang=${lang}]", // 包含移动端 META 信息的文档 "docApp": "html>(head>meta[charset=${charset}]+meta:br+title{Document}+meta:app+link:xicon+style)+body>(script:src+script)", "!:x": "!!!+docApp[lang=${lang}]", }, } } }
测试
修改后配置后,新建一个 html 文件,清空内容,输入
!
号,然后执行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"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <meta name="renderer" content="webkit"> <title>Document</title> <meta name="keywords" content=""> <meta name="description" content=""> <link rel="icon" type="image/x-icon" href="favicon.ico"> <style type="text/css"></style> </head> <body> <script type="text/javascript" src=""></script> <script type="text/javascript"></script> </body> </html>
清空内容,再输入
!:x
,然后执行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"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <meta name="renderer" content="webkit"> <title>Document</title> <meta name="screen-orientation" content="portrait"> <meta name="x5-orientation" content="portrait"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <meta name="theme-color" content="#000000"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <style type="text/css"></style> </head> <body> <script type="text/javascript" src=""></script> <script type="text/javascript"></script> </body> </html>
清空内容,再输入
!:x
,然后执行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"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <meta name="renderer" content="webkit"> <title>Document</title> <meta name="screen-orientation" content="portrait"> <meta name="x5-orientation" content="portrait"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <meta name="theme-color" content="#000000"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <style type="text/css"></style> </head> <body> <script type="text/javascript" src=""></script> <script type="text/javascript"></script> </body> </html>
清空内容,再输入
html:5s
,然后执行tab
格式化,代码输出:<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
以后我们可以继续新增片段进去,为了防止和原始的配置冲突,最好都添加一个私有前缀或后缀。
另外可增补的 meta 标签如:
-
<meta http-equiv="Cache-Control" content="no-transform" /> <meta http-equiv="Cache-Control" content="no-siteapp" /> <meta name="apple-itunes-app" content="app-id=000000000, app-argument=https://app.com/" />