IntelliJ javascript live templates (snippets)

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; $INDEX$ < $ARRAY$.length; $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$);

/**
 * @abbr: cdeb
 * @desc: console debug
 */
console.debug($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$

/**
 * @abbr: it
 * @desc: Inserts "It should..." assertion
 * @param: $WHAT$ {} []
 */
it('should $WHAT$', function(done) {
    $END$
});

/**
 * @abbr: desc
 * @desc: Inserts "describe" assertion
 * @param: $WHAT$ {} []
 */
describe('$WHAT$', function() {
    $END$
});

/**
 * @abbr: bef
 * @desc: Inserts "before" assertion
 */
before(function (done) {
    $END$
});

/**
 * @abbr: aft
 * @desc: Inserts "after" assertion
 */
after(function (done) {
    $END$
});

/**
 * @abbr: afe
 * @desc: Inserts "afterEach" assertion
 */
afterEach(function (done) {
    $END$
});

/**
 * @abbr: befe
 * @desc: Inserts "beforeEach" assertion
 */
beforeEach(function (done) {
    $END$
});

/**
 * @abbr: req
 * @desc: Inserts Nodejs require
 * @param: $VAR$ {} []
 * @param: $MODULE$ {} []
 */
var $VAR$ = require('$MODULE$');
$END$

live-templates.xml

<templateSet group="Personalized">
  <template name="clog" value="console.log($END$);" description="Inserts console.log() statement" toReformat="true" toShortenFQNames="true">
    <context>
      <option name="JAVA_SCRIPT" value="true" />
      <option name="JS_EXPRESSION" value="true" />
      <option name="JSX_HTML" value="true" />
      <option name="JS_STATEMENT" value="true" />
    </context>
  </template>
  <template name="for" value="for (var $INDEX$ = 0; $INDEX$ &lt; $ARRAY$.length; $INDEX$++) {&#10;    var $VAR$ = $ARRAY$[$INDEX$];&#10;    $END$&#10;}" shortcut="TAB" description="Inserts for loop" toReformat="true" toShortenFQNames="true">
    <variable name="INDEX" expression="jsSuggestIndexName()" defaultValue="i" alwaysStopAt="true" />
    <variable name="ARRAY" expression="jsArrayVariable()" defaultValue="array" alwaysStopAt="true" />
    <variable name="VAR" expression="decapitalize(jsArrayVariable())" defaultValue="a" 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="XML_TEXT" value="false" />
      <option name="JSON" value="false" />
      <option name="JSP" 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="CUCUMBER_FEATURE_FILE" value="false" />
      <option name="Bash" value="false" />
      <option name="JAVA_SCRIPT" value="true" />
      <option name="JS_EXPRESSION" value="true" />
      <option name="JSX_HTML" value="true" />
      <option name="JS_STATEMENT" value="true" />
      <option name="TypeScript" value="false" />
      <option name="Handlebars" value="false" />
      <option name="HAML" value="false" />
      <option name="JADE" value="false" />
      <option name="CoffeeScript" value="false" />
      <option name="DART" value="false" />
      <option name="OTHER" value="false" />
    </context>
  </template>
  <template name="if" value="if ($COND$) {&#10;    $END$&#10;}" description="Inserts if conditional" toReformat="true" toShortenFQNames="true">
    <variable name="COND" expression="" defaultValue="" alwaysStopAt="true" />
    <context>
      <option name="JAVA_SCRIPT" value="true" />
      <option name="JS_EXPRESSION" value="true" />
      <option name="JSX_HTML" value="true" />
      <option name="JS_STATEMENT" value="true" />
    </context>
  </template>
  <template name="ifel" value="if ($COND$) {&#10;    $END$&#10;} else {&#10;    &#10;}" description="Inserts if, else conditional" toReformat="true" toShortenFQNames="true">
    <variable name="COND" expression="" defaultValue="" alwaysStopAt="true" />
    <context>
      <option name="JAVA_SCRIPT" value="true" />
      <option name="JS_EXPRESSION" value="true" />
      <option name="JSX_HTML" value="true" />
      <option name="JS_STATEMENT" value="true" />
    </context>
  </template>
  <template name="ter" value="$COND$ ? $EXPR$ : $END$;" description="Inserts ternary operator" toReformat="true" toShortenFQNames="true">
    <variable name="COND" expression="" defaultValue="" alwaysStopAt="true" />
    <variable name="EXPR" expression="" defaultValue="" alwaysStopAt="true" />
    <context>
      <option name="JAVA_SCRIPT" value="true" />
      <option name="JS_EXPRESSION" value="true" />
      <option name="JSX_HTML" value="true" />
      <option name="JS_STATEMENT" value="true" />
    </context>
  </template>
  <template name="ctor" value="var $CLASS$ = function($PARAM$) {&#10;    $END$&#10;};" description="Inserts constructor" toReformat="true" toShortenFQNames="true">
    <variable name="CLASS" expression="" defaultValue="class" alwaysStopAt="true" />
    <variable name="PARAM" expression="" defaultValue="" alwaysStopAt="true" />
    <context>
      <option name="JAVA_SCRIPT" value="true" />
      <option name="JS_EXPRESSION" value="true" />
      <option name="JSX_HTML" value="true" />
      <option name="JS_STATEMENT" value="true" />
    </context>
  </template>
  <template name="m" value="$CLASS$.prototype.$FN$ = function($PARAMS$) {&#10;    $END$&#10;};" description="Inserts prototype method" toReformat="true" toShortenFQNames="true">
    <variable name="CLASS" expression="jsQualifiedClassName()" defaultValue="class" alwaysStopAt="true" />
    <variable name="FN" expression="jsMethodName()" defaultValue="fn" alwaysStopAt="true" />
    <variable name="PARAMS" expression="" defaultValue="params" alwaysStopAt="true" />
    <context>
      <option name="JAVA_SCRIPT" value="true" />
      <option name="JS_EXPRESSION" value="true" />
      <option name="JSX_HTML" value="true" />
      <option name="JS_STATEMENT" value="true" />
    </context>
  </template>
  <template name="p" value="$PROP$: $VAL$,&#10;$END$" description="Literal property" toReformat="true" toShortenFQNames="true">
    <variable name="PROP" expression="" defaultValue="" alwaysStopAt="true" />
    <variable name="VAL" expression="" defaultValue="" alwaysStopAt="true" />
    <context>
      <option name="JAVA_SCRIPT" value="true" />
      <option name="JS_EXPRESSION" value="true" />
      <option name="JSX_HTML" value="true" />
      <option name="JS_STATEMENT" value="true" />
    </context>
  </template>
  <template name="cwar" value="console.warn($END$);" description="Inserts console.warn() statement" toReformat="true" toShortenFQNames="true">
    <context>
      <option name="JAVA_SCRIPT" value="true" />
      <option name="JS_EXPRESSION" value="true" />
      <option name="JSX_HTML" value="true" />
      <option name="JS_STATEMENT" value="true" />
    </context>
  </template>
  <template name="cerr" value="console.error($END$);" description="cInserts console.error() statement" toReformat="true" toShortenFQNames="true">
    <context>
      <option name="JAVA_SCRIPT" value="true" />
      <option name="JS_EXPRESSION" value="true" />
      <option name="JSX_HTML" value="true" />
      <option name="JS_STATEMENT" value="true" />
    </context>
  </template>
  <template name="cl" value="(function() {&#10;    $END$&#10;})();" description="Inserts closure" toReformat="true" toShortenFQNames="true">
    <context>
      <option name="JAVA_SCRIPT" value="true" />
      <option name="JS_EXPRESSION" value="true" />
      <option name="JSX_HTML" value="true" />
      <option name="JS_STATEMENT" value="true" />
    </context>
  </template>
  <template name="f" value="function $FN$($PARAMS$) {&#10;    $END$&#10;};" description="Inserts function" toReformat="true" toShortenFQNames="true">
    <variable name="FN" expression="jsMethodName()" defaultValue="fn" alwaysStopAt="true" />
    <variable name="PARAMS" expression="" defaultValue="params" alwaysStopAt="true" />
    <context>
      <option name="JAVA_SCRIPT" value="true" />
      <option name="JS_EXPRESSION" value="true" />
      <option name="JSX_HTML" value="true" />
      <option name="JS_STATEMENT" value="true" />
    </context>
  </template>
  <template name="cdeb" value="console.debug($END$);" description="Inserts console.debug() statement" toReformat="true" toShortenFQNames="true">
    <context>
      <option name="JAVA_SCRIPT" value="true" />
      <option name="JS_EXPRESSION" value="true" />
      <option name="JSX_HTML" value="true" />
      <option name="JS_STATEMENT" value="true" />
    </context>
  </template>
  <template name="it" value="it('should $WHAT$', function(done) {&#10;    $END$&#10;});" description="Inserts &quot;It should...&quot; assertion" toReformat="true" toShortenFQNames="true">
    <variable name="WHAT" expression="" defaultValue="" alwaysStopAt="true" />
    <context>
      <option name="JAVA_SCRIPT" value="true" />
      <option name="JS_EXPRESSION" value="true" />
      <option name="JSX_HTML" value="true" />
      <option name="JS_STATEMENT" value="true" />
    </context>
  </template>
  <template name="desc" value="describe('$WHAT$', function() {&#10;    $END$&#10;});" description="Inserts &quot;describe&quot; assertion" toReformat="true" toShortenFQNames="true">
    <variable name="WHAT" expression="" defaultValue="" alwaysStopAt="true" />
    <context>
      <option name="JAVA_SCRIPT" value="true" />
      <option name="JS_EXPRESSION" value="true" />
      <option name="JSX_HTML" value="true" />
      <option name="JS_STATEMENT" value="true" />
    </context>
  </template>
  <template name="bef" value="before(function (done) {&#10;    $END$&#10;});" shortcut="TAB" description="Inserts &quot;before&quot; assertion" toReformat="true" toShortenFQNames="true">
    <context>
      <option name="JAVA_SCRIPT" value="true" />
      <option name="JS_EXPRESSION" value="true" />
      <option name="JSX_HTML" value="true" />
      <option name="JS_STATEMENT" value="true" />
    </context>
  </template>
  <template name="aft" value="after(function (done) {&#10;    $END$&#10;});" description="Inserts &quot;after&quot; assertion" toReformat="true" toShortenFQNames="true">
    <context>
      <option name="JAVA_SCRIPT" value="true" />
      <option name="JS_EXPRESSION" value="true" />
      <option name="JSX_HTML" value="true" />
      <option name="JS_STATEMENT" value="true" />
    </context>
  </template>
  <template name="afe" value="afterEach(function (done) {&#10;    $END$&#10;});" description="Inserts &quot;afterEach&quot; assertion" toReformat="true" toShortenFQNames="true">
    <context>
      <option name="JAVA_SCRIPT" value="true" />
      <option name="JS_EXPRESSION" value="true" />
      <option name="JSX_HTML" value="true" />
      <option name="JS_STATEMENT" value="true" />
    </context>
  </template>
  <template name="befe" value="beforeEach(function (done) {&#10;    $END$&#10;});" description="Inserts &quot;beforeEach&quot; assertion" toReformat="true" toShortenFQNames="true">
    <context>
      <option name="JAVA_SCRIPT" value="true" />
      <option name="JS_EXPRESSION" value="true" />
      <option name="JSX_HTML" value="true" />
      <option name="JS_STATEMENT" value="true" />
    </context>
  </template>
  <template name="req" value="var $VAR$ = require('$MODULE$');&#10;$END$" description="Inserts Nodejs require" toReformat="true" toShortenFQNames="true">
    <variable name="VAR" expression="" defaultValue="" alwaysStopAt="true" />
    <variable name="MODULE" expression="" defaultValue="" alwaysStopAt="true" />
    <context>
      <option name="JAVA_SCRIPT" value="true" />
      <option name="JS_EXPRESSION" value="true" />
      <option name="JSX_HTML" value="true" />
      <option name="JS_STATEMENT" value="true" />
    </context>
  </template>
</templateSet>