Webstorm 自定义代码的补全提示

    前端程序员在编写前端代码时,可能会敲无数的重复代码。那么怎么样来减少重复劳动呢?充分利用IDE工具的自定义代码补全功能是一个不错的方法。

    下面给出怎么在WebStorm中自定义代码补全提示的方法:

File ---> Setting ---> Editor ---> Live Templates ---> Javascript ---> 点右边+ ---> 在下方Abbreviation输入con ---> 在下方Description输入‘控制台输出’ ---> 在下方Temaplate text输入‘console.log($PARAM$)’ ---> 点击最下方有个蓝色的Define ---> 把Javascript全勾选上 ---> OK

Webstorm 自定义代码的补全提示_第1张图片


其中的$PARAM$是指,补全代码之后光标停留的位置。

附上建议设置的自定义代码补全:

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$");

 

你可能感兴趣的:(IDE)