前端开发Webstorm工具使用的快捷键

web前端开发设计师
前端开发详细设计文档
产品设计 前端开发流程

1.tab键—快速生成代码
2.Ctrl+D—复制行
3.Ctrl+Y—删除行
4.Ctrl+G—通过行号查找行
5.Ctrl+/ 或 Ctrl+Shift+/—添加注释
6.Ctrl+Shift+Up/Down—代码块向上或向下移动
7.Ctrl+R—替换文本
8.Ctrl+F—查找文本
9.Ctrl + Alt + T —给代码块添加环绕标签
10.Shift+enter—快速切换到下一行(无论光标在哪个位置)
11.Ctrl + Alt + enter—快速切换到上一行(无论光标在哪个位置)
12.F3—查找下一个
13.shift+F3—查找上一个
Emmet语言快捷编辑代码(tab键必须放在尾部)

lorem100  —可以作为替换文本内容(按tab键快速添加)
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aut corporis, culpa cum distinctio, dolorem doloremque earum enim iste nam nostrum officiis perspiciatis praesentium repellendus, sed tempora totam? Alias, beatae deserunt ex id in inventore iure maxime reprehenderit veritatis! Accusamus ad alias asperiores, atque blanditiis consectetur debitis dolor dolorem doloremque eaque earum eligendi enim ex fugiat illo iste itaque iusto labore magnam magni natus nobis nostrum omnis quam quos repellat tempora veritatis vero voluptas voluptates. Commodi consequuntur, culpa cumque cupiditate debitis delectus, expedita illum iure modi molestias neque nesciunt nostrum numquam omnis, quam quibusdam quos suscipit vero. Officia, quae voluptatem?

div>ul.self>li.item$5^p  —可以作为替换文本内容(按tab键快速添加)
<div>
<ul class=”self”>
<li class=”item1″></li>
<li class=”item2″></li>
<li class=”item3″></li>
<li class=”item4″></li>
<li class=”item5″></li>
</ul>
<p></p>
</div>
其中>表示子级别,#表示id,.表示类名,
5表示乘以5个,$表示自动增加,^表示向上提一个级别,+表示同一级别

div#myDiv>ul.myUl>[data-value]  —可以作为替换文本内容(按tab键快速添加)
<div id=”myDiv”>
<ul class=”myUl”>
<li data-value=””></li>
</ul>
</div>
[]表示自定义的属性,

设计转前端开发
平面设计和前端开发哪个简单
前端分开发和设计方案
» 本文来自:前端开发者 » 《前端开发Webstorm工具使用的快捷键》
» 本文链接地址:https://www.rokub.com/8011.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!