emmet
首先这是个极大提高生产力的工具,做前端同学肯定都知道,我们按一下!
就可以出来个基本的html
格式,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
但是有些地方还是需要我们手动修改的,比如lang
,如果你做移动端页面,可能还需要viewport
,这时候我们就要去定制一些个性化的模版。
定制html
模版
路径
我使用的编辑器是atom
,这份文件编辑好了在其它sublime
等编辑器可以通用的,Mac
用户打开这个目录~/.atom/packages/emmet/node_modules/emmet/lib/snippets.json
,所有用户也可以通过设置中instll
下面有一个Open Config Folder
,打开之后里面一路找下去也可以找到这个snippets.json
文件。
个性化设置
编辑这个文件找到大概690行左右,我的是在689行,有一个abbreviations
对象,我一路查找了这个对象中定义的行为,发现!!
这个操作没有被定义,我参考了:
"doc": "html>(head>meta[charset=${charset}]+title{${1:Document}})+body",
"html:5": "!!!+doc[lang=${lang}]",
这两行的写法,在后面插入了一行:
"!!": "!!!+html[lang=zh-Hans]>(head>meta[charset=${charset}]+meta:compat+meta:vp+title{${1:Document}}+link:favicon+link:css+style)+body",
重启atom
,新建html
输入!!
:
<!DOCTYPE html>
<html lang="zh-Hans">
<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">
<title>Document</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="style.css">
<style></style>
</head>
<body>
</body>
</html>
发现成功定义了我指定的命令,任务完成。
复用个性化文件
atom
设置完成了,但是我还用sublime
呀,怎么搞?
于是我去查看了emmet-sublime的readme
,里面有这样一段:
You can easily extend Emmet with new actions and filters or customize existing ones. In Emmet.sublime-settings
, define extensions_path
setting and Emmet will load all .js
and .json
files in specified folder at startup.
The default value of extensions_path
is ~/emmet
, which points to emmet folder inside your OS user’s home folder.
Also, you can create sections named as extension files (e.g. snippets
, preferences
and syntaxProfiles
) inside user’s Emmet.sublime-settings
file and write your customizations there. See original settings file for examples.
OK,大概意思就是启动的时候会读取.js
和.json
的个性化文件,而这个个性化文件的默认位置是~/emmet
,我们一路打开Preferences -> Package Settings -> Emmet -> Settings-User
,我这里把个性化文件目录指向了我为atom
配置的那一个:
{
"extensions_path": "~/.atom/packages/emmet/node_modules/emmet/lib",
}
重启sublime
,同样搞定!