跳到主要内容

Emmet 自定义 html 模版

· 阅读需 3 分钟

首先这是个极大提高生产力的工具，做前端同学肯定都知道，我们按一下!就可以出来个基本的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，所有用户也可以通过设置中 install 下面有一个 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 ，同样搞定！