Webstorm常见配置。

自己日常也写过一些，加上也参考一些百度上写的不错的文章。比较杂，下面就直接上链接了。

常用的也就，一些主题配色、项目多开、还有设置默认编码，快捷键之类的。还有一些用不到的。

具体操作细节，自行点击下方链接即可：

Webstorm--常见配置

WebStorm的快捷键，技巧

webstorm 格式化代码快捷键

剩下想说的就是Emmet的简单语法，操作。

原来写项目一直在用 Emmet语法，例如：ul>li*6 等等，下面会详细说。

百度得知，其实webstorm自带emmet插件。用过zen coding的人应该都知道，emmet就是zen coding的升级版。

当然，webstorm也不是支持所有的emmet语法，不过够用了。可以参考此文Enabling Emmet Support看看具体情况。

Webstorm 支持的 Emmet 语法参考链接

但是搞不懂，网上也有人让在Webstorm中自行安装 Emmet插件的。我安装和不安装没测试出来区别。可能用的功能太基础，也可能太菜了吧。

webstrom 自行安装步骤：（其实也很简单）

界面左上角 File > setting > plugins 中搜索 Emmet ，安装Emmet everywhere之后，重启webstrom即可。

插件搜索后，如下图：插件中还举了一个例子。

最后就发一些，我经常用到的 Emmet的简单语法，我都能用到，相信也能帮助到你。

　　HTML模板生成，这个貌似 sublime Text 中用的多，不过也应该知道一下。

！ +Tab (Emmet语法默认最后都是+Tab ，下面我就不再多说了)

　　语法一：新增 p元素带数字（语法+效果）

p{$}*5

<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>

　　语法二：新增 ul li 带数字内容（语法+效果）

ul>li{这是第$个li}*5

<ul>
    <li>这是第1个li</li>
    <li>这是第2个li</li>
    <li>这是第3个li</li>
    <li>这是第4个li</li>
    <li>这是第5个li</li>
</ul>

　　语法三：新增元素带类名（语法+效果）

span.box

<span class="box"></span>

　　语法四：新增元素带类名+ id（语法+效果）

span.box#idbox

<span class="box" id="idbox"></span>

　　语法五：最后来个嵌套多的。（细品，你细品就会发现很多时候都会用到。）

#page>div.logo+ul#nav>li*5>a{Item $}

<div id="page">
    <div class="logo"></div>
    <ul id="nav">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>

注：

1、在 Emmet插件中，可以利用如：h1{元素内容$}*n 的方式，自动复制生成 n行，$ 的作用是自动升序生成序号，便于测试。

2、在 Emmet插件中，loremn(n为字母个数) 可自动输出 n个字母组成的文本内容。

以后想起来啥，再来补充。

by不言谢。

不要和别人比，要赢得是自己。(ง •̀_•́)ง

Webstorm（常见配置+Emmet简单语法）