6/22/2015 - 11:58 AM

README.md

Rendered
Source

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>

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

README.md

intellij javascript live templates

How to

Contribute