Skip to content

Instantly share code, notes, and snippets.

@ngryman
Last active January 16, 2023 14:07
Show Gist options
  • Save ngryman/4760153 to your computer and use it in GitHub Desktop.
Save ngryman/4760153 to your computer and use it in GitHub Desktop.
intellij javascript live templates

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 :)

/** 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$
<?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>
@2bon
Copy link

2bon commented Jul 26, 2017

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

How to do it?

@Eitol
Copy link

Eitol commented Aug 20, 2017

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

and restart webstorm

@szhllyyl
Copy link

szhllyyl commented Mar 31, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment