webstorm工具使用的快捷键

Posted 2020-10-08

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>
[]表示自定义的属性，

 

 更多学习分享加群      105601600