WebStorm快捷键

2018-05-11  本文已影响0人  lueyoo

(1)想敲一对h1标签,只需要敲h1,按tab键,变回自动补全为:<h1></h1>

(2)想输入带id的,如<div id="abc"></div>只需要输入:div#abc,按Tab键,便会自动补全。

(3)想输入带class的,如 <div class="abc"></div>只需要输入:div.abc,按Tab键,便会自动补全。

(4)想输入一个div里有6个p标签,只需要输入: div>p*6 ,按Tab键,便会自动补全为:

   <div>
        <p></p>

        <p></p>

        <p></p>

        <p></p>

        <p></p>

        <p></p>
</div>

(5)特定属性的标签的补全:

a[href=#] tab后:
<a href="#"></a>

ul.menu>li*6>a[href=#]{HTML}
tab后补全为:

<ul class="menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">HTML</a></li>
    <li><a href="#">HTML</a></li>
    <li><a href="#">HTML</a></li>
    <li><a href="#">HTML</a></li>
    <li><a href="#">HTML</a></li>
</ul>

更多代码简写补全的技巧可以参考:
http://blog.wpjam.com/m/emmet-grammar/
http://www.w3cplus.com/tools/emmet-cheat-sheet.html
http://www.ruanyifeng.com/blog/2013/06/emmet_and_haml.html

选中要整理的代码

windows:
CTRL+ALT+L

Mac
command+option+L

上一篇 下一篇

猜你喜欢

热点阅读