【04】emmet系列之编辑器_html/css_WEB-ITnose

　 【01】emmet系列之基础介绍

　　【02】emmet系列之HTML语法

　　【03】emmet系列之CSS语法

　　【04】emmet系列之编辑器

　　【05】emmet系列之各种缩写

前端开发人员，常用的是sublime和webstorm。

emmet在sublime上的效果：

1). css ：他与其它编辑器的区别在于细节上，比如ctrl,alt+方向键可以修和里边的数值

2). html 效果：

3). sublime的emmet规则修改：

packages->Emmet->emmet->snippets.json

emmet在webstorm上的效果：

只有一个例外jetbrain公司的产品线：webstorm,phpstorm,intellij idea都是内置的，不需要安装。

1).

写js的效果：

2). webstorm的emmet规则修改：Files -> settings -> Live Templates

定制

你还可以定制Emmet插件：

添加新缩写或更新现有缩写，可修改snippets.json文件

更改Emmet过滤器和操作的行为，可修改preferences.json文件

定义如何生成HTML或XML代码，可修改syntaxProfiles.json文件

针对不同编辑器的插件

Emmet支持的编辑器如下（链接为针对该编辑器的Emmet插件）：

Sublime Text 3/2

TextMate 1.x

Eclipse/Aptana

Coda 1.6 and 2.x

Espresso

Chocolat （通过“Install Mixin”对话框添加)

Komodo Edit/IDE （通过Tools → Add-ons菜单添加)

Notepad++

PSPad

</li> <li>CodeMirror2/3</li> <li>Brackets</li> <p class="sycode"> <h2><strong>在线编辑器的支持：</strong></h2> <li> JSFiddle</li> <li> JS Bin</li> <li> CodePen</li> <li> ICEcoder</li> <li> Divshot</li> <li> Codio</li> <p class="sycode"> <h2><strong>第三方插件的支持</strong></h2> <p>下面这些编辑器的插件都是由第三方开发者所提供的，所以可能并不支持所有Emmet的功能和特性。</p> <li> SynWrite</li> <li> WebStorm</li> <li> PhpStorm</li> <li> Vim</li> <li> HTML-Kit</li> <li> HippoEDIT</li> <li> CodeLobster PHP Edition</li> <li> TinyMCE</li> </div> <div class="article_ab" style="width: 720px;height: 100px;margin: 0 auto;margin-top: 15px;"> </div> <div class="article_recommend"> <div class="list_top">推荐阅读</div> <div class="ListItems"> <ul class="NewsList"> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/RuHeJiang_curl_S_49e9e332.html" target="_blank" title="如何将curl上传进度发送到要显示的ajax">如何将curl上传进度发送到要显示的ajax</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《如何将curl上传进度发送到要显示的ajax》经验，为你挑选了0个好方法。 ... <a href="https://devbox.cn/p/RuHeJiang_curl_S_49e9e332.html" target="_blank" title="如何将curl上传进度发送到要显示的ajax">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/C--_JiangLeiTian_a5148c52.html" target="_blank" title="C ++将类添加到名称空间：为什么？">C ++将类添加到名称空间：为什么？</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《C++将类添加到名称空间：为什么？》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/C--_JiangLeiTian_a5148c52.html" target="_blank" title="C ++将类添加到名称空间：为什么？">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/FanYingQiDaiMaZh_ba432207.html" target="_blank" title="反应器代码中的Facebook Developer API">反应器代码中的Facebook Developer API</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《反应器代码中的FacebookDeveloperAPI》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/FanYingQiDaiMaZh_ba432207.html" target="_blank" title="反应器代码中的Facebook Developer API">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/Zai_VisualStudio_6dd7d7c8.html" target="_blank" title="在Visual Studio 2015社区中找不到Web应用程序模板">在Visual Studio 2015社区中找不到Web应用程序模板</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《在VisualStudio2015社区中找不到Web应用程序模板》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/Zai_VisualStudio_6dd7d7c8.html" target="_blank" title="在Visual Studio 2015社区中找不到Web应用程序模板">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/RuHeCong_AmazonS_39b8ce23.html" target="_blank" title="如何从Amazon S3下载文件？">如何从Amazon S3下载文件？</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《如何从AmazonS3下载文件？》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/RuHeCong_AmazonS_39b8ce23.html" target="_blank" title="如何从Amazon S3下载文件？">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/Zi_Symfony2-8_Sh_54ee07d9.html" target="_blank" title="自Symfony 2.8生成捆绑包时,新选项询问了多个应用程序">自Symfony 2.8生成捆绑包时,新选项询问了多个应用程序</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《自Symfony2.8生成捆绑包时,新选项询问了多个应用程序》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/Zi_Symfony2-8_Sh_54ee07d9.html" target="_blank" title="自Symfony 2.8生成捆绑包时,新选项询问了多个应用程序">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/RuHeJinWeiTeDing_9a6e69d2.html" target="_blank" title="如何仅为特定URL添加Spring Security验证码过滤器">如何仅为特定URL添加Spring Security验证码过滤器</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《如何仅为特定URL添加SpringSecurity验证码过滤器》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/RuHeJinWeiTeDing_9a6e69d2.html" target="_blank" title="如何仅为特定URL添加Spring Security验证码过滤器">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/NaZhongLeiXingDe_3fca445a.html" target="_blank" title="哪种类型的修复级别是"DBCC CHECKDB(databasename,repair)"？">哪种类型的修复级别是"DBCC CHECKDB(databasename,repair)"？</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《哪种类型的修复级别是"DBCCCHECKDB(databasename,repair)"？》经验，为你挑选了0个好方法。 ... <a href="https://devbox.cn/p/NaZhongLeiXingDe_3fca445a.html" target="_blank" title="哪种类型的修复级别是"DBCC CHECKDB(databasename,repair)"？">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/KuoZhanDanYingJu_5f03d6c0.html" target="_blank" title="扩展单应矩阵以防止失真">扩展单应矩阵以防止失真</a></h2> </div> <div class="NewsInfo"> <div class="NewsImg"> <a href="https://devbox.cn/p/KuoZhanDanYingJu_5f03d6c0.html" target="_blank" title="扩展单应矩阵以防止失真"><img src="https://img.devbox.cn/3cccf/16086/243/f6fa5d24bcf9dc1a.png" width="120" height="70" alt="扩展单应矩阵以防止失真"/></a> </div> <div class="NewsDesc" style="width:500px;margin-left:15px;"> 如何解决《扩展单应矩阵以防止失真》经验，为你挑选了0个好方法。 ... <a href="https://devbox.cn/p/KuoZhanDanYingJu_5f03d6c0.html" target="_blank" title="扩展单应矩阵以防止失真">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/RuGuo_int_BuShiL_36961839.html" target="_blank" title="如果int不是类,为什么int x = int(5)合法？">如果int不是类,为什么int x = int(5)合法？</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《如果int不是类,为什么intx=int(5)合法？》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/RuGuo_int_BuShiL_36961839.html" target="_blank" title="如果int不是类,为什么int x = int(5)合法？">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/VisualStudio2015_da825785.html" target="_blank" title="Visual Studio 2015,无法更改新资源文件的访问修饰符">Visual Studio 2015,无法更改新资源文件的访问修饰符</a></h2> </div> <div class="NewsInfo"> <div class="NewsImg"> <a href="https://devbox.cn/p/VisualStudio2015_da825785.html" target="_blank" title="Visual Studio 2015,无法更改新资源文件的访问修饰符"><img src="https://img.devbox.cn/3cccf/16086/243/0d081b960db85daf.png" width="120" height="70" alt="Visual Studio 2015,无法更改新资源文件的访问修饰符"/></a> </div> <div class="NewsDesc" style="width:500px;margin-left:15px;"> 如何解决《VisualStudio2015,无法更改新资源文件的访问修饰符》经验，为你挑选了2个好方法。 ... <a href="https://devbox.cn/p/VisualStudio2015_da825785.html" target="_blank" title="Visual Studio 2015,无法更改新资源文件的访问修饰符">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/DieDaiBuTongDeLe_35b1b60f.html" target="_blank" title="迭代不同的类型">迭代不同的类型</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《迭代不同的类型》经验，为你挑选了6个好方法。 ... <a href="https://devbox.cn/p/DieDaiBuTongDeLe_35b1b60f.html" target="_blank" title="迭代不同的类型">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/ShiYong_UIO_QuDo_ea49e70c.html" target="_blank" title="使用UIO驱动程序映射一对中断或较小的地址空间">使用UIO驱动程序映射一对中断或较小的地址空间</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《使用UIO驱动程序映射一对中断或较小的地址空间》经验，为你挑选了0个好方法。 ... <a href="https://devbox.cn/p/ShiYong_UIO_QuDo_ea49e70c.html" target="_blank" title="使用UIO驱动程序映射一对中断或较小的地址空间">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/KuCunDaLou_aaa1810a.html" target="_blank" title="库存大楼">库存大楼</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《库存大楼》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/KuCunDaLou_aaa1810a.html" target="_blank" title="库存大楼">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/WoYingGaiYouDuoS_80631a7e.html" target="_blank" title="我应该有多少个分店？我怎么知道的？">我应该有多少个分店？我怎么知道的？</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《我应该有多少个分店？我怎么知道的？》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/WoYingGaiYouDuoS_80631a7e.html" target="_blank" title="我应该有多少个分店？我怎么知道的？">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/Angular_He_Inter_3c1ba3dc.html" target="_blank" title="Angular和Internet Explorer 11 - 输入无法正常工作">Angular和Internet Explorer 11 - 输入无法正常工作</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《Angular和InternetExplorer11-输入无法正常工作》经验，为你挑选了0个好方法。 ... <a href="https://devbox.cn/p/Angular_He_Inter_3c1ba3dc.html" target="_blank" title="Angular和Internet Explorer 11 - 输入无法正常工作">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/WebApi-_ChuanDiZ_87fec99e.html" target="_blank" title="WebApi - 传递值数组">WebApi - 传递值数组</a></h2> </div> <div class="NewsInfo"> <div class="NewsImg"> <a href="https://devbox.cn/p/WebApi-_ChuanDiZ_87fec99e.html" target="_blank" title="WebApi - 传递值数组"><img src="https://img.devbox.cn/3cccf/16086/243/927c0cdb72fe5ad0.png" width="120" height="70" alt="WebApi - 传递值数组"/></a> </div> <div class="NewsDesc" style="width:500px;margin-left:15px;"> 如何解决《WebApi-传递值数组》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/WebApi-_ChuanDiZ_87fec99e.html" target="_blank" title="WebApi - 传递值数组">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/Haystack_Shuo_--_e80baae1.html" target="_blank" title="Haystack说"无法找到SearchResult的模型"">Haystack说"无法找到SearchResult的模型"</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《Haystack说"无法找到SearchResult的模型"》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/Haystack_Shuo_--_e80baae1.html" target="_blank" title="Haystack说"无法找到SearchResult的模型"">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/Ansible_BianLian_1b73f54b.html" target="_blank" title="Ansible变量覆盖默认为另一个角色">Ansible变量覆盖默认为另一个角色</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《Ansible变量覆盖默认为另一个角色》经验，为你挑选了0个好方法。 ... <a href="https://devbox.cn/p/Ansible_BianLian_1b73f54b.html" target="_blank" title="Ansible变量覆盖默认为另一个角色">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/KeYiZaiMuBiao_c__861f08e1.html" target="_blank" title="可以在目标c中使用swift中的数组简化概念吗？">可以在目标c中使用swift中的数组简化概念吗？</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《可以在目标c中使用swift中的数组简化概念吗？》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/KeYiZaiMuBiao_c__861f08e1.html" target="_blank" title="可以在目标c中使用swift中的数组简化概念吗？">[详细]</a> </div> <div style="clear:both"></div> </li> </ul> </div> </div> <div class="article_cmnt" style="display: none;"> <div class="cmnt_title">吐了个 "CAO" !</div> <form action="" method="post"> <div class="cmnt_text"> <textarea class="ping-txt" onfocus="ck_txt(this);" onblur="ck_txt2(this);" id="ping-txt" name="ping-txt" >吐个槽吧,看都看了