如何在mac下sublime text 安装 emmet - 简书
下载简书移动应用
写了2911字，被7人关注，获得了11个喜欢
如何在mac下sublime text 安装 emmet
对于前端开发来说，Mac下最流行的coding工具不是DW，而是更简洁的sublime text。sublime text软件本身不能自动补充，这时就需要一款强大的插件——emmet。如何安装插件呢？按照以往的经验，是下载插件后双击直接安装吗？还是要解压到特定文件夹？我尝试百度（原谅我用不了google）了sublime text、emmet、mac、下载、安装、插件等关键字的组合，搜索结果里只有少量有用的文章，点开后的内容往往雷同。文章中包含了大量的代码和认识却不看不懂的词语，对于我这个编程小白来说犹如天书。我向一个前端大神求助，对方远程指挥我操作了一番，依然没有成功。后来根据大神发给我的一篇英文教程，自己重新照着操作了一遍，总算安装成功。真正装完后发现其实没有其他中文教程中写的那么复杂。今天就把我看到的那篇英文教程的关键步骤翻译一下，作为自己的学习笔记。如果这篇文章有幸帮到其他遇到类似问题的同学，我会非常开心。现在开始吧！安装Package control1.你需要安装正确版本的sublime text 3。下载地址在此：/32.打开sublime text 3，按CTRL + `或者在菜单中选择View & Show Console，可打开控制台——也就是下面的一条输入框。3.在输入框中输入：import urllib.request, pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( '' + pf.replace(' ','%20')).read())然后回车。这时可以看到鼠标变成了旋转的彩色圆圈，稍等片刻，一些代码出现在了控制台的上面。重启sublime text 3。安装emmet1.在sublime text 3中按下快捷键CTRL + SHIFT + P或者在菜单中选择Tools & Command Palette…2.在弹出的输入框的自动提示中选择Package Control: Install Package。3.输入Emmet并点击。此时emmet开始安装啦。等待几分钟，待最下面一行显示几行line，几个column时，emmet就算装好了。再次重启sublime text 3。emmet的使用方法在这里，忘记了的同学可以再复习一下。http://blog.csdn.net/ys/article/details/等等，为什么还是不能自动补充呢？要先保存成html或者css的文件呀！现在是不是可以了呢？英文教程地址在此，如果小伙伴们在安装过程中还有其他问题可以参考下原版。/install-emmet-sublime-text-3/
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
选择支付方式：(转)SUBLIME TEXT3编辑器插件EMMET使用教程_mageo博客_天涯博客
mageo的博客2015年八月八日正式开通，博主一生钟爱网络技术，创建本博客的目的旨在结交更多的志同道合的同兴趣朋友，能够一起学习一起交流关于wordpress建站，以及程序语言，等各种网络知识的探讨
今日访问：[$DayVisitCount$]
总访问量：4609
开博时间：
博客排名：200335
(173)(151)(0)(7)(2)(10)(0)
(29)(35)(35)(25)(27)(21)(1)
今天插播一下，呵呵，小编mageo给大家先介绍一款代码书写工具的使用，会给大家省去好多时间，站长必用哦！
Emmet使用教程:Emmet是Sublime&Text3的HTML5代码提示编辑器插件
一、Sublime&Text3是一个非常强大的代码编辑器，几乎涉及到WEB代码编辑的就离不开这个工具。那么Sublime&
Text3的具体介绍就不多说了，我的另一篇博文已经介绍的很清除，大家可以到那里查看安装下载及使用的教程，这里我把地址提供给大家。
Sublime安装教程：/soft/webmaster-tools/387.html
Sublime-Text3汉化破解版下载：/s/1jGGRu0e
二、安装方式
Emmet插件安装一般采用两种方式，一种是通过命令行安装。另外一种是下载离线安装。
今天给大家介绍的是离线安装的方法，比较简单操作，而且不容易出错或安装失败。
1、解压下载好的Emmet插件包(安装包在文章最后提供下载)
2、将解压完的插件包里的Emmet和PyV8两个文件夹复制到Sublime&Text3的程序包中；
程序包可以在Sublime的顶部工具栏的首选项(Preferences)里的第一个选项就是:
3、拷贝完后左下角会显示自动安装，安装好后，重启Sublime&Text3;
4、在编辑器里输入英文状态下的&!&,然后按键盘的快捷键CTRL+E，出现了HTML5的代码库，代表安装成功了。
5、如果一次安装失败就多重复安装几次就好了。
三、自动生成HTML5网页基本源代码
我们点击sublime左上角的文件并新建一个文件，然后另存为index.html。
然后我们在编辑器里输入英文状态下的叹号&!&,然后按键盘的快捷键TAB键，或者CTRL+E都可以，默认情况下就会出现如下的HTML5代码：
&!doctype&html&
&html&lang=&en&&
&meta&charset=&UTF-8&P&
&title&Document&/title&
由于默认状态生成的HTML5代码的声明标签是小写字母，&!doctype&html&，还有html的语言是英文&html&lang=&en&&
而一般我们编辑网页的时候看到的不是这样的，应该是大写&!DOCTYPE&html&,和&html&lang=&zh-cn&&.
其实这两处默认的也无关紧要，改不改都没有关系，如果感觉不好看或怕出错，那我们就让他能够默认生成我们想要的就可以了。
首先：进入程序包
进入方法还是点顶部工具栏的首选项进入程序包
然后：进入Emmet文件夹，再进入emmet文件夹，找到snippets.json文件；
然后按照下图进行修改：
修改完保存，从新启动Sublime，然后再试试是不是就变成你想要的了。
四、利用Emmet插件快速生成代码。
Emmet提供了非常丰富的HTML和CSS代码的快速生成功能，大大了增加了开发代码录入速度。只不过，Emmet提供的生成方式需要先进行学习，所以开始可能会很慢，但等都学会了就好了。
下面我们就介绍快速生成代码的各种写法：
=====第一部分，HTML代码生成====
1、快速生成HTML5代码结构
[!+(CTRL+E或TAB)]或者[html:5+tab],生成的代码如下：
&!DOCTYPE&html&
&html&lang=&zh-cn&&
&meta&charset=&UTF-8&P&
&title&Document&/title&
所有代码的生成快捷键基本都是TAB键。
2、快速生成标签代码
标签+TAB，例如我们要生成body标签，我们输输入body，然后按TAB，就生成如下标签：
所有标签都可以这么自动生成。想生成div就输入div+tab,等等。
3、快速生成标签相应的属性值
比如我们想生成a标签的超级链接，我们就在编辑器输入a:link+TAB，就会出现下面这个属性的完整标签。
&a&href=&http://&&&/a&
比如我们要生成a标签的邮件地址链接，我们就输入a:mail+TAB,就会生成下面的连接到email的完整标签。
&a&href=&mailto:&&&/a&
4、快速生成标签和标签内的值。
还是用a标签来举例：
a{这是个超链接}+TAB,就生成了下面代码：
&a&href=&&&这是个超链接&/a&
5、生成CSS链接link
link+tab,就生成了下面的CSS样式引入代码：
&link&rel=&stylesheet&&href=&&&
下面我再介绍就不说具体怎么生成了，因为生成的方式都是按快捷键TAB键。我只说快捷代码和生成代码。
6、生成表单控件
输入：input
&input&type=&text&&
输入：input:hidden
&input&type=&hidden&&name=&&&
7、生成父标签+子标签的一组标签
输入：table+
只举几个例子就可以了，剩下的大家自己去摸索，只要是带子标签的都可以这么生成。
8、生成嵌套子标签
输入：nav&ul&li
9、生成相邻兄弟标签
输入：div+p+h1
&div&&/div&
10、生成乘积数量的标签
输入：nav&ul&li*3
11、生成具有Id的标签
输入：div#footer
&div&id=&footer&&&/div&
&h&id=&abc&&&/h&
12、生成具有class的标签
div.sidebar
&div&class=&sidebar&&&/div&
div.mageo.ql2015
&div&class=&mageo&ql2015&P&&/div&
span.mageo
&span&class=&mageo&&&/span&
13、块引用标签生成
&blockquote&&/blockquote&
====第二部分，CSS代码快速生成===
1、生成position:relative
生成：position:&
其实你会发现使用sublime结合emmet插件的CSS提示会非常的灵活，不用死板的必须要输入pos。
例如，你可以输入po也同样可以生成position:&
也就是说，只要输入po或者大于po字母数量的值，都可以得到position:&
那么如果你输入p会出现什么呢？会输出：padding:.因为padding的第二个字母是a，应该是字母的顺序优先级。然后自动搜素相关的属性。
另外如果你输入有误，还会自动纠错，比如你输入pod，是错误的，但也会输出：position:&
还有比如你想得到position:,正常标准的写法是：pos:a才可以输出
但是你直接输入：poa，也会出现position:
这就是sublime的纠错功能，很强大的。
2、生成背景属性
A、输入：bg
输出：background:&;
B、使用bg+可以展开背景属性的完整形式
输出：background:&#fff&url()&0&0&no-
C、使用bg:n可以生成背景属性值为
输出：background:&
也就是说如果想单独输出元素的某个值的话，就直接在后面加冒号和属性值的第一个字母就可以了。
3、生成边框
生成border:&;
4、注释代码快捷键
CTRL+/为注释代码的快捷方式，无论是HTML还是CSS，如果想把代码注释掉，就直接用这个快捷键就OK！
修改完保存，从新启动Sublime，然后再试试是不是就变成你想要的了。
四、利用Emmet插件快速生成代码。
Emmet提供了非常丰富的HTML和CSS代码的快速生成功能，大大了增加了开发代码录入速度。只不过，Emmet提供的生成方式需要先进行学习，所以开始可能会很慢，但等都学会了就好了。
下面我们就介绍快速生成代码的各种写法：
=====第一部分，HTML代码生成====
1、快速生成HTML5代码结构
[!+(CTRL+E或TAB)]或者[html:5+tab],生成的代码如下：
&!DOCTYPE&html&
&html&lang=&zh-cn&&
&meta&charset=&UTF-8&P&
&title&Document&/title&
所有代码的生成快捷键基本都是TAB键。
2、快速生成标签代码
标签+TAB，例如我们要生成body标签，我们输输入body，然后按TAB，就生成如下标签：
所有标签都可以这么自动生成。想生成div就输入div+tab,等等。
3、快速生成标签相应的属性值
比如我们想生成a标签的超级链接，我们就在编辑器输入a:link+TAB，就会出现下面这个属性的完整标签。
&a&href=&http://&&&/a&
比如我们要生成a标签的邮件地址链接，我们就输入a:mail+TAB,就会生成下面的连接到email的完整标签。
&a&href=&mailto:&&&/a&
4、快速生成标签和标签内的值。
还是用a标签来举例：
a{这是个超链接}+TAB,就生成了下面代码：
&a&href=&&&这是个超链接&/a&
5、生成CSS链接link
link+tab,就生成了下面的CSS样式引入代码：
&link&rel=&stylesheet&&href=&&&
下面我再介绍就不说具体怎么生成了，因为生成的方式都是按快捷键TAB键。我只说快捷代码和生成代码。
6、生成表单控件
输入：input
&input&type=&text&&
输入：input:hidden
&input&type=&hidden&&name=&&&
7、生成父标签+子标签的一组标签
输入：table+
只举几个例子就可以了，剩下的大家自己去摸索，只要是带子标签的都可以这么生成。
8、生成嵌套子标签
输入：nav&ul&li
9、生成相邻兄弟标签
输入：div+p+h1
&div&&/div&
10、生成乘积数量的标签
输入：nav&ul&li*3
11、生成具有Id的标签
输入：div#footer
&div&id=&footer&&&/div&
&h&id=&abc&&&/h&
12、生成具有class的标签
div.sidebar
&div&class=&sidebar&&&/div&
div.mageo.ql2015
&div&class=&mageo&ql2015&P&&/div&
span.mageo
&span&class=&mageo&&&/span&
13、块引用标签生成
&blockquote&&/blockquote&
====第二部分，CSS代码快速生成===
1、生成position:relative
生成：position:&
其实你会发现使用sublime结合emmet插件的CSS提示会非常的灵活，不用死板的必须要输入pos。
例如，你可以输入po也同样可以生成position:&
也就是说，只要输入po或者大于po字母数量的值，都可以得到position:&
那么如果你输入p会出现什么呢？会输出：padding:.因为padding的第二个字母是a，应该是字母的顺序优先级。然后自动搜素相关的属性。
另外如果你输入有误，还会自动纠错，比如你输入pod，是错误的，但也会输出：position:&
还有比如你想得到position:,正常标准的写法是：pos:a才可以输出
但是你直接输入：poa，也会出现position:
这就是sublime的纠错功能，很强大的。
2、生成背景属性
A、输入：bg
输出：background:&;
B、使用bg+可以展开背景属性的完整形式
输出：background:&#fff&url()&0&0&no-
C、使用bg:n可以生成背景属性值为
输出：background:&
也就是说如果想单独输出元素的某个值的话，就直接在后面加冒号和属性值的第一个字母就可以了。
3、生成边框
生成border:&;
4、注释代码快捷键
CTRL+/为注释代码的快捷方式，无论是HTML还是CSS，如果想把代码注释掉，就直接用这个快捷键就OK！修改完保存，从新启动Sublime，然后再试试是不是就变成你想要的了。
四、利用Emmet插件快速生成代码。
Emmet提供了非常丰富的HTML和CSS代码的快速生成功能，大大了增加了开发代码录入速度。只不过，Emmet提供的生成方式需要先进行学习，所以开始可能会很慢，但等都学会了就好了。
下面我们就介绍快速生成代码的各种写法：
=====第一部分，HTML代码生成====
1、快速生成HTML5代码结构
[!+(CTRL+E或TAB)]或者[html:5+tab],生成的代码如下：
&!DOCTYPE&html&
&html&lang=&zh-cn&&
&meta&charset=&UTF-8&P&
&title&Document&/title&
所有代码的生成快捷键基本都是TAB键。
2、快速生成标签代码
标签+TAB，例如我们要生成body标签，我们输输入body，然后按TAB，就生成如下标签：
所有标签都可以这么自动生成。想生成div就输入div+tab,等等。
3、快速生成标签相应的属性值
比如我们想生成a标签的超级链接，我们就在编辑器输入a:link+TAB，就会出现下面这个属性的完整标签。
&a&href=&http://&&&/a&
比如我们要生成a标签的邮件地址链接，我们就输入a:mail+TAB,就会生成下面的连接到email的完整标签。
&a&href=&mailto:&&&/a&
4、快速生成标签和标签内的值。
还是用a标签来举例：
a{这是个超链接}+TAB,就生成了下面代码：
&a&href=&&&这是个超链接&/a&
5、生成CSS链接link
link+tab,就生成了下面的CSS样式引入代码：
&link&rel=&stylesheet&&href=&&&
下面我再介绍就不说具体怎么生成了，因为生成的方式都是按快捷键TAB键。我只说快捷代码和生成代码。
6、生成表单控件
输入：input
&input&type=&text&&
输入：input:hidden
&input&type=&hidden&&name=&&&
7、生成父标签+子标签的一组标签
输入：table+
只举几个例子就可以了，剩下的大家自己去摸索，只要是带子标签的都可以这么生成。
8、生成嵌套子标签
输入：nav&ul&li
9、生成相邻兄弟标签
输入：div+p+h1
&div&&/div&
10、生成乘积数量的标签
输入：nav&ul&li*3
11、生成具有Id的标签
输入：div#footer
&div&id=&footer&&&/div&
&h&id=&abc&&&/h&
12、生成具有class的标签
div.sidebar
&div&class=&sidebar&&&/div&
div.mageo.ql2015
&div&class=&mageo&ql2015&P&&/div&
span.mageo
&span&class=&mageo&&&/span&
13、块引用标签生成
&blockquote&&/blockquote&
====第二部分，CSS代码快速生成===
1、生成position:relative
生成：position:&
其实你会发现使用sublime结合emmet插件的CSS提示会非常的灵活，不用死板的必须要输入pos。
例如，你可以输入po也同样可以生成position:&
也就是说，只要输入po或者大于po字母数量的值，都可以得到position:&
那么如果你输入p会出现什么呢？会输出：padding:.因为padding的第二个字母是a，应该是字母的顺序优先级。然后自动搜素相关的属性。
另外如果你输入有误，还会自动纠错，比如你输入pod，是错误的，但也会输出：position:&
还有比如你想得到position:,正常标准的写法是：pos:a才可以输出
但是你直接输入：poa，也会出现position:
这就是sublime的纠错功能，很强大的。
2、生成背景属性
A、输入：bg
输出：background:&;
B、使用bg+可以展开背景属性的完整形式
输出：background:&#fff&url()&0&0&no-
C、使用bg:n可以生成背景属性值为
输出：background:&
也就是说如果想单独输出元素的某个值的话，就直接在后面加冒号和属性值的第一个字母就可以了。
3、生成边框
生成border:&;
4、注释代码快捷键
CTRL+/为注释代码的快捷方式，无论是HTML还是CSS，如果想把代码注释掉，就直接用这个快捷键就OK！
====小编Mageo提醒您更多语法介绍====分类： |}