webstorm的 Emmet 快捷方式

在前端开发的过程中,大部分的工作是写 HTM L和 CSS 代码。手动编写代码的时候,效率会特别低下,因为需要敲打很多尖括号,尽管一些软件给开发者提供了一些能快速编写代码方式,但是效率提高不是特别的明显。

于是,就有了 Emmet(前身是Zen Coding) 横空出世!

它可以极大的提高代码编写的效率,它提供了一种非常简练的语法规则,然后立刻生成对应的 HTML 结构或者 CSS 代码,同时还有多种实用的功能帮助进行前端开发。

目前,很多前端开发工具,包括 Webstorm,HBuilder,Dreamweaver ,VSCode 等都已经集成了 Emmet。

没有集成 Emmet 的编辑器都提供了安装插件,如 Sublime Text、Eclipse/Aptana、Notepad++等。

关于webstorm的 Emmet 快捷键,网上有,但是没有一个总的集合。

基于我自己的使用 Webstorm 的经验,特写此文,总结一下 Emmet 的快捷方式,也给新手做一个使用指南。

Emmet 在 webstorm 中,通过简写代码+ tab键就可以生成对应的完整代码。

更多简写方式,可以参考 Emmet 官网:https://docs.emmet.io/cheat-sheet/

一、写标签

1.快速生成 HTML5 网页结构

! + tab
html:5 + tab



    
    
    
    Document




 个人觉得这种方式生成的HTML5框架,比 webstorm 自带的HTML5框架来的更实在。

2. 生成meta

编码设置

 meta:utf + tab
 

viewport 是移动端开发必备代码。

meta:vp + tab

3. 生成link

引入 CSS 文件。

link
link:css

引入网站小图标。

link:favicon

4. id(#),class(.)

div.box
div#header div.box#header div.box.top#header

5. 属性( [ ] )

div[title]
div[title]
button[type=submit][name=login] button[type=submit name=login]

6. 子节点(>),兄弟节点(+),上级节点(^)

div.box>p

div.box+p

div.box>p+div.small^div.next

7. 重复( * )、内容( { } )、自增符( $ )

ul.list>li*3
ul.list>li{这个是列表}*3
  • 这个是列表
  • 这个是列表
  • 这个是列表
ul.list>li.item${这个是列表 $ }*3
  • 这个是列表 1
  • 这个是列表 2
  • 这个是列表 3
ul.list>li{ 内容 $$$}*3
  • 内容 001
  • 内容 002
  • 内容 003

插入无意义的文字:lorem 其后加上数字就会生成对应数量的无意义的文字,补全文本,方便排版

lorem10
-----------
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, exercitationem?

8. 一些特殊情况

(1)类型较多的标签

比如,a,input,其他依次类推。

以下也可以用 标签[属性=值] 的方式去写

a:link


a:mail
input


input:button


input:submit


input:range


input:radio

(2)如果不写标签名,默认就是 div

.box

(3)自带的子标签是可以省略的

table>.a>.b*2
ul>.item*2

二、写样式

写样式主要秉承的原则,简写就是单词的首字母。

tdn
text-decoration: none;

ovh
overflow: hidden;

如果有数值,直接在后面写就是。

h100px
height: 100px;

非数值的值,就用冒号(:)连接首字母。

bg:n
background: none;

更多的样式简写,大家可以参考 Emmet 官网:https://docs.emmet.io/cheat-sheet/

总的来说,个人觉得要多写,才能熟练。熟练了,工作效率自然就提高了。

你可能感兴趣的:(webstorm,webstorm)