sublime Text3之Emmet插件

tool

Emmet把片段这个概念提高到了一个新的层次：你可以设置CSS形式的能够动态被解析的表达式，然后根据你所输入的缩写来得到相应的内容。Emmet是很成熟的并且非常适用于编写HTML/XML 和 CSS 代码的前端开发工具，但也可以用于编程语言。

安装

详细-->通过package control安装

• 在 Package Control 中选择 Install package 或者按 Ctrl+Shift+P，打开命令板
• 输入 pci 然后选择 Install Package
• 搜索输入 emmet 找到 Emmet Css Snippets，点击就可以自动完成安装。

在没有后缀的文件中，你可以按下shift + ctrl + p呼出面板，输入seth就可以设置当前文件的解析模式为 HTML 。

使用方法

直接在编辑器中输入HTML或CSS的代码的缩写，然后按tab键就可以拓展为完整的代码片段。

语法

• 生成html5文本

html:5

• 后代：>
  
  • 缩写：nav>ul>li

<nav>  
    <ul>  
        <li></li>  
    </ul>  
</nav> 

• 兄弟：+
  
  • 缩写：div+p+bq

<div></div>  
<p></p>  
<blockquote></blockquote>  

• 乘法：*
  
  • 缩写：ul>li*5

<ul>  
    <li></li>  
    <li></li>  
    <li></li>  
    <li></li>  
    <li></li>  
</ul>

更多>>>>>>

快捷键

ctrl+shift+a
nav>ul.nav>li.nav-item$*

<nav>
    <ul class="nav">
        <li class="nav-item1">ipsum</li>
        <li class="nav-item2">dolor</li>
        <li class="nav-item3">sit</li>
    </ul>
</nav>

更多

注释

html中 注释 缩写为：c
css中 /* */ 注释 缩写为：cm
js中 // 快捷键 ctrl + /

HTMLBeauty

ctrl+shift+alt+f

Update Image Size

shift+u