-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
沉沙
2018-06-08
来源 ：
阅读 1249
评论 0
摘要：emmet是个极大提高生产力的工具，做前端同学肯定都知道，希望阅读本篇文章以后大家有所收获，帮助大家对HTML+CSS的理解更加深入。
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呀，怎么搞？
启动的时候会读取.js和.json的个性化文件，而这个个性化文件的默认位置是~/emmet，我们一路打开Preferences -> Package Settings -> Emmet -> Settings-User，我这里把个性化文件目录指向了我为atom配置的那一个：
{
"extensions_path": "~/.atom/packages/emmet/node_modules/emmet/lib",
}重启sublime，同样搞定！
本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML/CSS频道！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
