intellij javascript live templates

README.md

intellij javascript live templates

Just a dump of handy live templates I use with IntelliJ. They should also work with WebStorm.

How to

• Go to settings.
• Search for live templates.
• Under the javascript section you should be able to manage your templates.

For each template in this gist:

• create new template
• fill abbrevation with the @abbr value.
• fill description with the @desc value.
• copy/paste the code.
• click on edit variables
• for each variable:
  • fill expression with the {} value of the @param.
  • fill default value with the [] value of the @param.

Contribute

Feel free to enhance or add new live templates. Also feel free to host an export jar file and link it here :)

live-templates.js

/** loops */

/**
 * @abbr: for
 * @desc: for loop
 * @param $INDEX$ {jsSuggestIndexName()} [i]
 * @param: $ARRAY$ {jsArrayVariable()} [array]
 * @param: $VAR$ {decapitalize(jsArrayVariable())} [a]
 */
for (var $INDEX$ = 0, len = $ARRAY$.length; $INDEX$ < len; $INDEX$++) {
    var $VAR$ = $ARRAY$[$INDEX$];
    $END$
}

/**
 * @abbr: rfor
 * @desc: reverse for loop
 * @param $INDEX$ {jsSuggestIndexName()} [i]
 * @param: $ARRAY$ {jsArrayVariable()} [array]
 * @param: $VAR$ {decapitalize(jsArrayVariable())} [a]
 */
for (var $INDEX$ = $ARRAY$.length - 1; $INDEX$ >= 0; $INDEX$--) {
    var $VAR$ = $ARRAY$[$INDEX$];
    $END$
}

/** conditions */

/**
 * @abbr: if
 * @desc: if
 * @param $COND$ {} []
 */
if ($COND$) {
    $END$
}

/**
 * @abbr: ifel
 * @desc: if, else
 * @param $COND$ {} []
 */
if ($COND$) {
    $END$
}
else {
    
}

/**
 * @abbr: ter
 * @desc: ternary operator
 * @param $COND$ {} []
 * @param: $EXPR$ {} []
 */
$COND$ ? $EXPR$ : $END$;

/** objects */
 
/**
 * @abbr: ctor
 * @desc: constructor
 * @param $CLASS$ {} [Class]
 * @param: $PARAM$ {} []
 */
var $CLASS$ = function($PARAM$) {
    $END$
};

/**
 * @abbr: m
 * @desc: method
 * @param $CLASS$ {jsQualifiedClassName()} [Class]
 * @param $FN$ {jsMethodName()} [fn]
 * @param $PARAMS$ {} [params]
 */
$CLASS$.prototype.$FN$ = function($PARAMS$) {
    $END$
};

/**
 * @abbr: t
 * @desc: this
 * @param $PROP$ {completeSmart()} []
 */
this.$PROP$;
$END$

/**
 * @abbr: o
 * @desc: literal object
 */
{
    p$END$
};

/**
 * @abbr: p
 * @desc: literal property
 */
$PROP$: $VAL$,
$END$

/**
 * @abbr: so
 * @desc: same line literal object
 */
{ sp$END$ };

/**
 * @abbr: sp
 * @desc: same line literal property
 */
$PROP$: $VAL$, $END$

/** debug */

/**
 * @abbr: clog
 * @desc: console log
 */
console.log($END$);

/**
 * @abbr: cwar
 * @desc: console warn
 */
console.warn($END$);

/**
 * @abbr: cerr
 * @desc: console error
 */
console.error($END$);

/** misc */

/**
 * @abbr: cl
 * @desc: closure
 */
(function() {
    $END$
})();

/**
 * @abbr: f
 * @desc: function
 * @param $FN$ {jsMethodName()} [fn]
 * @param: $PARAMS$ {} []
 */
function $FN$($PARAMS$) {
    $END$
};

/**
 * @abbr: us
 * @desc: use strict
 */
"use strict";
$END$

live-templates.xml

<?xml version="1.0" encoding="UTF-8"?>
<templateSet group="JavaScript">
  <template name="forin" value="for (var $VAR$ in $ARRAY$) {&#10;  $END$&#10;}" description="Iterate (for..in)" toReformat="true" toShortenFQNames="true">
    <variable name="ARRAY" expression="jsArrayVariable()" defaultValue="&quot;array &quot;" alwaysStopAt="true" />
    <variable name="VAR" expression="jsSuggestVariableName()" defaultValue="&quot;o&quot;" alwaysStopAt="true" />
    <context>
      <option name="HTML_TEXT" value="false" />
      <option name="HTML" value="false" />
      <option name="XSL_TEXT" value="false" />
      <option name="XML" value="false" />
      <option name="CSS_PROPERTY_VALUE" value="false" />
      <option name="CSS_DECLARATION_BLOCK" value="false" />
      <option name="CSS_RULESET_LIST" value="false" />
      <option name="CSS" value="false" />
      <option name="JAVA_SCRIPT" value="true" />
      <option name="CoffeeScript" value="false" />
      <option name="HAML" value="false" />
      <option name="OTHER" value="false" />
    </context>
  </template>
  <template name="for" value="for (var $INDEX$ = 0, len = $ARRAY$.length; $INDEX$ &lt; len; $INDEX$++) {&#10;    var $VAR$ = $ARRAY$[$INDEX$];&#10;    $END$&#10;}" description="Iterate elements of array" toReformat="true" toShortenFQNames="true">
    <variable name="INDEX" expression="jsSuggestIndexName()" defaultValue="&quot;i&quot;" alwaysStopAt="true" />
    <variable name="ARRAY" expression="jsArrayVariable()" defaultValue="&quot;array&quot;" alwaysStopAt="true" />
    <variable name="VAR" expression="decapitalize(jsArrayVariable())" defaultValue="&quot;a&quot;" alwaysStopAt="true" />
    <context>
      <option name="HTML_TEXT" value="false" />
      <option name="HTML" value="false" />
      <option name="XSL_TEXT" value="false" />
      <option name="XML" value="false" />
      <option name="CSS_PROPERTY_VALUE" value="false" />
      <option name="CSS_DECLARATION_BLOCK" value="false" />
      <option name="CSS_RULESET_LIST" value="false" />
      <option name="CSS" value="false" />
      <option name="JAVA_SCRIPT" value="true" />
      <option name="CoffeeScript" value="false" />
      <option name="HAML" value="false" />
      <option name="OTHER" value="false" />
    </context>
  </template>
  <template name="rfor" value="for (var $INDEX$ = $ARRAY$.length - 1; $INDEX$ &gt;= 0; $INDEX$--) {&#10;  var $VAR$ = $ARRAY$[$INDEX$];&#10;  $END$&#10;}" description="Iterate elements of array in reverse order" toReformat="true" toShortenFQNames="true">
    <variable name="INDEX" expression="jsSuggestIndexName()" defaultValue="&quot;i&quot;" alwaysStopAt="true" />
    <variable name="ARRAY" expression="jsArrayVariable()" defaultValue="&quot;array&quot;" alwaysStopAt="true" />
    <variable name="VAR" expression="decapitalize(jsArrayVariable())" defaultValue="&quot;o&quot;" alwaysStopAt="true" />
    <context>
      <option name="HTML_TEXT" value="false" />
      <option name="HTML" value="false" />
      <option name="XSL_TEXT" value="false" />
      <option name="XML" value="false" />
      <option name="CSS_PROPERTY_VALUE" value="false" />
      <option name="CSS_DECLARATION_BLOCK" value="false" />
      <option name="CSS_RULESET_LIST" value="false" />
      <option name="CSS" value="false" />
      <option name="JAVA_SCRIPT" value="true" />
      <option name="CoffeeScript" value="false" />
      <option name="HAML" value="false" />
      <option name="OTHER" value="false" />
    </context>
  </template>
  <template name="m" value="$CLASS$.prototype.$FN$ = function($PARAMS$) {&#10;    $END$&#10;};" description="Declare a method" toReformat="true" toShortenFQNames="true">
    <variable name="CLASS" expression="jsQualifiedClassName()" defaultValue="&quot;Class&quot;" alwaysStopAt="true" />
    <variable name="FN" expression="jsMethodName()" defaultValue="&quot;fn&quot;" alwaysStopAt="true" />
    <variable name="PARAMS" expression="" defaultValue="&quot;param&quot;" alwaysStopAt="true" />
    <context>
      <option name="HTML_TEXT" value="false" />
      <option name="HTML" value="false" />
      <option name="XSL_TEXT" value="false" />
      <option name="XML" value="false" />
      <option name="CSS_PROPERTY_VALUE" value="false" />
      <option name="CSS_DECLARATION_BLOCK" value="false" />
      <option name="CSS_RULESET_LIST" value="false" />
      <option name="CSS" value="false" />
      <option name="JAVA_SCRIPT" value="true" />
      <option name="CoffeeScript" value="false" />
      <option name="HAML" value="false" />
      <option name="OTHER" value="false" />
    </context>
  </template>
  <template name="ctor" value="var $CLASS$ = function($PARAM$) {&#10;    $END$&#10;};" description="Declare a constructor" toReformat="true" toShortenFQNames="true">
    <variable name="CLASS" expression="" defaultValue="&quot;Class&quot;" alwaysStopAt="true" />
    <variable name="PARAM" expression="" defaultValue="" alwaysStopAt="true" />
    <context>
      <option name="HTML_TEXT" value="false" />
      <option name="HTML" value="false" />
      <option name="XSL_TEXT" value="false" />
      <option name="XML" value="false" />
      <option name="CSS_PROPERTY_VALUE" value="false" />
      <option name="CSS_DECLARATION_BLOCK" value="false" />
      <option name="CSS_RULESET_LIST" value="false" />
      <option name="CSS" value="false" />
      <option name="JAVA_SCRIPT" value="true" />
      <option name="CoffeeScript" value="false" />
      <option name="HAML" value="false" />
      <option name="OTHER" value="false" />
    </context>
  </template>
  <template name="if" value="if ($COND$) {&#10;    $END$&#10;}" description="If ..." toReformat="false" toShortenFQNames="true">
    <variable name="COND" expression="" defaultValue="" alwaysStopAt="true" />
    <context>
      <option name="HTML_TEXT" value="false" />
      <option name="HTML" value="false" />
      <option name="XSL_TEXT" value="false" />
      <option name="XML" value="false" />
      <option name="CSS_PROPERTY_VALUE" value="false" />
      <option name="CSS_DECLARATION_BLOCK" value="false" />
      <option name="CSS_RULESET_LIST" value="false" />
      <option name="CSS" value="false" />
      <option name="JAVA_SCRIPT" value="true" />
      <option name="CoffeeScript" value="false" />
      <option name="HAML" value="false" />
      <option name="OTHER" value="false" />
    </context>
  </template>
  <template name="ifel" value="if ($COND$) {&#10;    $END$&#10;}&#10;else {&#10;    &#10;}" description="If ... Else ..." toReformat="false" toShortenFQNames="true">
    <variable name="COND" expression="" defaultValue="" alwaysStopAt="true" />
    <context>
      <option name="HTML_TEXT" value="false" />
      <option name="HTML" value="false" />
      <option name="XSL_TEXT" value="false" />
      <option name="XML" value="false" />
      <option name="CSS_PROPERTY_VALUE" value="false" />
      <option name="CSS_DECLARATION_BLOCK" value="false" />
      <option name="CSS_RULESET_LIST" value="false" />
      <option name="CSS" value="false" />
      <option name="JAVA_SCRIPT" value="true" />
      <option name="CoffeeScript" value="false" />
      <option name="HAML" value="false" />
      <option name="OTHER" value="false" />
    </context>
  </template>
  <template name="ter" value="$COND$ ? $EXPR$ : $END$;" description="Ternary operator" toReformat="false" toShortenFQNames="true">
    <variable name="COND" expression="" defaultValue="" alwaysStopAt="true" />
    <variable name="EXPR" expression="" defaultValue="" alwaysStopAt="true" />
    <context>
      <option name="HTML_TEXT" value="false" />
      <option name="HTML" value="false" />
      <option name="XSL_TEXT" value="false" />
      <option name="XML" value="false" />
      <option name="CSS_PROPERTY_VALUE" value="false" />
      <option name="CSS_DECLARATION_BLOCK" value="false" />
      <option name="CSS_RULESET_LIST" value="false" />
      <option name="CSS" value="false" />
      <option name="JAVA_SCRIPT" value="true" />
      <option name="CoffeeScript" value="false" />
      <option name="HAML" value="false" />
      <option name="OTHER" value="false" />
    </context>
  </template>
  <template name="scl" value="(function() {&#10;    $SELECTION$&#10;})();" description="Closure" toReformat="true" toShortenFQNames="true">
    <variable name="SELECTION" expression="" defaultValue="" alwaysStopAt="false" />
    <context>
      <option name="HTML_TEXT" value="false" />
      <option name="HTML" value="false" />
      <option name="XSL_TEXT" value="false" />
      <option name="XML" value="false" />
      <option name="CSS_PROPERTY_VALUE" value="false" />
      <option name="CSS_DECLARATION_BLOCK" value="false" />
      <option name="CSS_RULESET_LIST" value="false" />
      <option name="CSS" value="false" />
      <option name="JAVA_SCRIPT" value="true" />
      <option name="CoffeeScript" value="false" />
      <option name="HAML" value="false" />
      <option name="OTHER" value="false" />
    </context>
  </template>
  <template name="cl" value="(function() {&#10;    $END$&#10;})();" description="Closure" toReformat="true" toShortenFQNames="true">
    <context>
      <option name="HTML_TEXT" value="false" />
      <option name="HTML" value="false" />
      <option name="XSL_TEXT" value="false" />
      <option name="XML" value="false" />
      <option name="CSS_PROPERTY_VALUE" value="false" />
      <option name="CSS_DECLARATION_BLOCK" value="false" />
      <option name="CSS_RULESET_LIST" value="false" />
      <option name="CSS" value="false" />
      <option name="JAVA_SCRIPT" value="true" />
      <option name="CoffeeScript" value="false" />
      <option name="HAML" value="false" />
      <option name="OTHER" value="false" />
    </context>
  </template>
  <template name="sp" value="$PROP$: $VAL$, $END$" description="Declare a property" toReformat="true" toShortenFQNames="true">
    <variable name="PROP" expression="" defaultValue="" alwaysStopAt="true" />
    <variable name="VAL" expression="" defaultValue="" alwaysStopAt="true" />
    <context>
      <option name="HTML_TEXT" value="false" />
      <option name="HTML" value="false" />
      <option name="XSL_TEXT" value="false" />
      <option name="XML" value="false" />
      <option name="CSS_PROPERTY_VALUE" value="false" />
      <option name="CSS_DECLARATION_BLOCK" value="false" />
      <option name="CSS_RULESET_LIST" value="false" />
      <option name="CSS" value="false" />
      <option name="JAVA_SCRIPT" value="true" />
      <option name="CoffeeScript" value="false" />
      <option name="HAML" value="false" />
      <option name="OTHER" value="false" />
    </context>
  </template>
  <template name="f" value="function $FN$($PARAMS$) {&#10;    $END$&#10;};" description="Declare a function" toReformat="true" toShortenFQNames="true">
    <variable name="FN" expression="jsMethodName()" defaultValue="&quot;fn&quot;" alwaysStopAt="true" />
    <variable name="PARAMS" expression="" defaultValue="&quot;param&quot;" alwaysStopAt="true" />
    <context>
      <option name="HTML_TEXT" value="false" />
      <option name="HTML" value="false" />
      <option name="XSL_TEXT" value="false" />
      <option name="XML" value="false" />
      <option name="CSS_PROPERTY_VALUE" value="false" />
      <option name="CSS_DECLARATION_BLOCK" value="false" />
      <option name="CSS_RULESET_LIST" value="false" />
      <option name="CSS" value="false" />
      <option name="JAVA_SCRIPT" value="true" />
      <option name="CoffeeScript" value="false" />
      <option name="HAML" value="false" />
      <option name="OTHER" value="false" />
    </context>
  </template>
  <template name="t" value="this.$PROP$;&#10;$END$" description="this" toReformat="true" toShortenFQNames="true">
    <variable name="PROP" expression="completeSmart()" defaultValue="" alwaysStopAt="true" />
    <context>
      <option name="HTML_TEXT" value="false" />
      <option name="HTML" value="false" />
      <option name="XSL_TEXT" value="false" />
      <option name="XML" value="false" />
      <option name="CSS_PROPERTY_VALUE" value="false" />
      <option name="CSS_DECLARATION_BLOCK" value="false" />
      <option name="CSS_RULESET_LIST" value="false" />
      <option name="CSS" value="false" />
      <option name="JAVA_SCRIPT" value="true" />
      <option name="CoffeeScript" value="false" />
      <option name="HAML" value="false" />
      <option name="OTHER" value="false" />
    </context>
  </template>
  <template name="so" value="{ sp$END$ };" description="Declare a literal object" toReformat="true" toShortenFQNames="true">
    <context>
      <option name="HTML_TEXT" value="false" />
      <option name="HTML" value="false" />
      <option name="XSL_TEXT" value="false" />
      <option name="XML" value="false" />
      <option name="CSS_PROPERTY_VALUE" value="false" />
      <option name="CSS_DECLARATION_BLOCK" value="false" />
      <option name="CSS_RULESET_LIST" value="false" />
      <option name="CSS" value="false" />
      <option name="JAVA_SCRIPT" value="true" />
      <option name="CoffeeScript" value="false" />
      <option name="HAML" value="false" />
      <option name="OTHER" value="false" />
    </context>
  </template>
  <template name="o" value="{&#10;    p$END$&#10;};" description="Declare a literal object" toReformat="true" toShortenFQNames="true">
    <context>
      <option name="HTML_TEXT" value="false" />
      <option name="HTML" value="false" />
      <option name="XSL_TEXT" value="false" />
      <option name="XML" value="false" />
      <option name="CSS_PROPERTY_VALUE" value="false" />
      <option name="CSS_DECLARATION_BLOCK" value="false" />
      <option name="CSS_RULESET_LIST" value="false" />
      <option name="CSS" value="false" />
      <option name="JAVA_SCRIPT" value="true" />
      <option name="CoffeeScript" value="false" />
      <option name="HAML" value="false" />
      <option name="OTHER" value="false" />
    </context>
  </template>
  <template name="p" value="$PROP$: $VAL$,&#10;$END$" description="Declare a property" toReformat="true" toShortenFQNames="true">
    <variable name="PROP" expression="" defaultValue="" alwaysStopAt="true" />
    <variable name="VAL" expression="" defaultValue="" alwaysStopAt="true" />
    <context>
      <option name="HTML_TEXT" value="false" />
      <option name="HTML" value="false" />
      <option name="XSL_TEXT" value="false" />
      <option name="XML" value="false" />
      <option name="CSS_PROPERTY_VALUE" value="false" />
      <option name="CSS_DECLARATION_BLOCK" value="false" />
      <option name="CSS_RULESET_LIST" value="false" />
      <option name="CSS" value="false" />
      <option name="JAVA_SCRIPT" value="true" />
      <option name="CoffeeScript" value="false" />
      <option name="HAML" value="false" />
      <option name="OTHER" value="false" />
    </context>
  </template>
  <template name="us" value="&quot;use strict&quot;;&#10;$END$" description="Inserts 'use strict' statement" toReformat="true" toShortenFQNames="true">
    <context>
      <option name="HTML_TEXT" value="false" />
      <option name="HTML" value="false" />
      <option name="XSL_TEXT" value="false" />
      <option name="XML" value="false" />
      <option name="CSS_PROPERTY_VALUE" value="false" />
      <option name="CSS_DECLARATION_BLOCK" value="false" />
      <option name="CSS_RULESET_LIST" value="false" />
      <option name="CSS" value="false" />
      <option name="CoffeeScript" value="false" />
      <option name="HAML" value="false" />
      <option name="OTHER" value="false" />
    </context>
  </template>
  <template name="clog" value="console.log($END$);" description="console.log" toReformat="true" toShortenFQNames="true">
    <context>
      <option name="HTML_TEXT" value="false" />
      <option name="HTML" value="false" />
      <option name="XSL_TEXT" value="false" />
      <option name="XML" value="false" />
      <option name="CSS_PROPERTY_VALUE" value="false" />
      <option name="CSS_DECLARATION_BLOCK" value="false" />
      <option name="CSS_RULESET_LIST" value="false" />
      <option name="CSS" value="false" />
      <option name="JAVA_SCRIPT" value="true" />
      <option name="CoffeeScript" value="false" />
      <option name="HAML" value="false" />
      <option name="OTHER" value="false" />
    </context>
  </template>
  <template name="it" value="it('should $WHAT$', function(done) {&#10;&#9;$END$&#10;});" description="It should..." toReformat="false" toShortenFQNames="true">
    <variable name="WHAT" expression="" defaultValue="" alwaysStopAt="true" />
    <context>
      <option name="HTML_TEXT" value="false" />
      <option name="HTML" value="false" />
      <option name="XSL_TEXT" value="false" />
      <option name="XML" value="false" />
      <option name="CSS_PROPERTY_VALUE" value="false" />
      <option name="CSS_DECLARATION_BLOCK" value="false" />
      <option name="CSS_RULESET_LIST" value="false" />
      <option name="CSS" value="false" />
      <option name="JAVA_SCRIPT" value="true" />
      <option name="CoffeeScript" value="false" />
      <option name="HAML" value="false" />
      <option name="OTHER" value="false" />
    </context>
  </template>
  <template name="on" value="on('$EVT$', function(e) {&#10;&#9;$END$;&#10;});" description="On event" toReformat="false" toShortenFQNames="true">
    <variable name="EVT" expression="" defaultValue="" alwaysStopAt="true" />
    <context>
      <option name="HTML_TEXT" value="false" />
      <option name="HTML" value="false" />
      <option name="XSL_TEXT" value="false" />
      <option name="XML" value="false" />
      <option name="CSS_PROPERTY_VALUE" value="false" />
      <option name="CSS_DECLARATION_BLOCK" value="false" />
      <option name="CSS_RULESET_LIST" value="false" />
      <option name="CSS" value="false" />
      <option name="JAVA_SCRIPT" value="true" />
      <option name="CoffeeScript" value="false" />
      <option name="HAML" value="false" />
      <option name="OTHER" value="false" />
    </context>
  </template>
  <template name="pf" value="$FN$: function($PARAMS$) {&#10;    $END$&#10;}" description="Declare a property function" toReformat="true" toShortenFQNames="true">
    <variable name="FN" expression="" defaultValue="" alwaysStopAt="true" />
    <variable name="PARAMS" expression="" defaultValue="&quot;param&quot;" alwaysStopAt="true" />
    <context>
      <option name="HTML_TEXT" value="false" />
      <option name="HTML" value="false" />
      <option name="XSL_TEXT" value="false" />
      <option name="XML" value="false" />
      <option name="CSS_PROPERTY_VALUE" value="false" />
      <option name="CSS_DECLARATION_BLOCK" value="false" />
      <option name="CSS_RULESET_LIST" value="false" />
      <option name="CSS" value="false" />
      <option name="JAVA_SCRIPT" value="true" />
      <option name="CoffeeScript" value="false" />
      <option name="HAML" value="false" />
      <option name="OTHER" value="false" />
    </context>
  </template>
  <template name="desc" value="describe('$WHAT$', function() {&#10;&#9;$END$&#10;});" description="Describe..." toReformat="false" toShortenFQNames="true">
    <variable name="WHAT" expression="" defaultValue="" alwaysStopAt="true" />
    <context>
      <option name="HTML_TEXT" value="false" />
      <option name="HTML" value="false" />
      <option name="XSL_TEXT" value="false" />
      <option name="XML" value="false" />
      <option name="CSS_PROPERTY_VALUE" value="false" />
      <option name="CSS_DECLARATION_BLOCK" value="false" />
      <option name="CSS_RULESET_LIST" value="false" />
      <option name="CSS" value="false" />
      <option name="JAVA_SCRIPT" value="true" />
      <option name="CoffeeScript" value="false" />
      <option name="HAML" value="false" />
      <option name="OTHER" value="false" />
    </context>
  </template>
</templateSet>

feel free to host an export jar file and link it here :)

How to do it?

The easy way is copy the xml file to:
/home/USER/.WebStorm2017.1/config/templates

and restart webstorm

how to create comments templates for a function in javascript with a params list