webstorm快速添加手机端适配代码快捷键-代码自动生成指令快捷输入

关于webstorm的实用快捷键,网上很难搜出来,一搜就是一大坨重复的垃圾信息.特设此文,整理常用的代码快捷键在这里.

0.WebStorm代码快捷输入的基本使用方式

输入标签,然后按Tab键,无需输入尖括号<> . 其他指令也类似,用tab键来启动自动生成代码指令.

示例:  输入div按tab键,自动出现 <div></div>

1.手机端页面适配快捷键

输入: meta:vp

再按tab键就出来了.

这行代码,会将HTML5自动适配成手机端页面

2. html5基本结构代码

新建空白html页面

输入: ! 

再按Tab键,就会自动生成标准的html5的页面结构代码.就是在webstorm上新建一个html看到的那一大块代码

3.输入标签自带类名

输入: 标签名称.类名

再按tab键

示例: div.main 再按tab键就会自动生成: 

<div class='main'>

</div>

4.多行重复代码

示例: ul>li*3

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

4.1多种指令可以联合使用

示例:ul.haha>li.hehe*3

    <ul class="haha">
        <li class="hehe"></li>
        <li class="hehe"></li>
        <li class="hehe"></li>
    </ul>

5.带ID的标签

示例: div#haha

<div id="haha"></div>

[未完待续...]