Webstorm 自定义代码的补全提示--整理版

JavaScript:

con~~打印
  console.log($PARAM$);

funa~~无名函数
  function () {$PARAM$}

func~~含传参无名函数
  function($PARAM$) {}

funn~~有名函数
  function $PARAM$() {}

forr~~for循环
  for () {$PARAM$}

fori~~for循环
  for (var i = 0; i < $PARAM$.length; i++) {$PARAM$[i]}

iff~~if判断
  if ($PARAM$) {}

ife~~if.else判断
  if ($PARAM$) {
  } else{
  }

dg~~通过ID获取元素
  document.getElementById("$PARAM$");

dq~~通过选择器获取元素
  document.querySelector("$PARAM$");

dqa~~通过选择器获取一组元素
  document.querySelectorAll("$PARAM$");

Zen HTML:

st~~style标签
  <style type="text/css">
    $PARAM$     
  </style>

lin~~link标签引入外部CSS
  <link rel="stylesheet" type="text/css" href="$PARAM$"/>

tab~~table表格
  <table border="$PARAM$" cellspacing="" cellpadding="">
    <tr><th>Header</th></tr>
    <tr><td>Data</td></tr>
  </table>

ul~~ul.li标签
  <ul>
    <li>$PARAM$</li>
  </ul>

dl~~dl.dt.dd标签
  <dl>
    <dt>$PARAM$</dt>
    <dd></dd>
  </dl>

sc~~script标签
  <script type="text/javascript">
    $PARAM$ 
  </script>

scs~~script标签引入外部js
  <script src="$PARAM$" type="text/javascript" charset="utf-8"></script>

Zen CSS:

wh~~宽度高度
  width: $PARAM$px;
  height: px;

fsli~~字体大小、行高
  font-size: $PARAM$px;
  line-height: px;

Vue--Zen HTML:

roul~~router-link标签

rouv~~router-view标签