Table of Contents
Description
An extensive set of Javascript live templates for use in JetBrains IDEs. These live templates are based off of https://atom.io/packages/es6-javascript.
Documentation
| Live Template Short Hand | Description | Template |
|---|---|---|
| v | Declarations: var statement |
var $name$; |
| ve | Declarations: var assignment |
var $name$ = $value$; |
| l | Declarations: let statement |
let $name$; |
| le | Declarations: let assignment |
let $name$ = $value$; |
| co | Declarations: const statement |
const $name$; |
| coe | Declarations: const assignment |
const $name$ = $value$ |
| cos | Declarations: const symbol |
const $name$ = Symbol('$name$');
|
| if | Flow Control: if statement |
if ($condition$) {
$END$
}
|
| el | Flow Control: else statement |
else {
$END$
}
|
| ife | Flow Control: if else statement |
if ($condition1$) {
$then1$
} else {
$then2$
}
|
| ei | Flow Control: else if statement |
else if ($condition$) {
$end$
}
|
| fl | Flow Control: for loop |
for (let $index$ = 0; $index$ < $iterable$.length; $index$++) {
$END$
}
|
| fi | Flow Control: for in loop |
for (let $key$ in $source$) {
if ($source$.hasOwnProperty($key$)) {
$END$
}
}
|
| fo | Flow Control: for of loop (ES6) |
for (let $key$ of $source$) {
$END$
}
|
| wl | Flow Control: while loop |
while ($condition$) {
$END$
}
|
| tc | Flow Control: try/catch |
try {
$try_body$
} catch ($error$) {
$catch_body$
}
|
| tf | Flow Control: try/finally |
try {
$try_body$
} finally {
$finally_body$
}
|
| tcf | Flow Control: try/catch/finally |
try {
$try_body$
} catch ($error$) {
$catch_body$
} finally {
$finally_body$
}
|
| f | Functions: anonymous function |
function ($arguments$) { $END$ }
|
| iife | Functions: immediately-invoked function expression (IIFE) |
(($arguments$) => {
$function_body$
})($passed_arguments$);
|
| fa | Functions: function apply |
$fn$.apply($context$, $arguments$); |
| fc | Functions: function call |
$fn$.call($context$, $arguments$); |
| fb | Functions: function bind |
$fn$.bind($context$, $arguments$); |
| af | Functions: arrow function (ES6) |
($arguments$) => $statement$ |
| afb | Functions: arrow function with body (ES6) |
($arguments$) => {
$END$
}
|
| gf | Functions: generator function (ES6) |
function* ($arguments$) {
$END$
}
|
| gfn | Functions: named generator function (ES6) |
function* $name$ ($arguments$) {
$END$
}
|
| fe | Iterables: forEach loop (chainable) |
$iterable$.forEach(($item$)) => {
$END$
});
|
| map | Iterables: map function (chainable) |
$iterable$.map(($item$)) => {
return $END$
});
|
| reduce | Iterables: reduce function (chainable) |
$iterable$.reduce(($previous$, $current$) => {
return $body$
}, $initial$);
|
| filter | Iterables: filter function (chainable) |
$iterable$.filter(($item$) => {
// return true to remove item from collection
$END$
});
|
| find | Iterables: ES6 find function (chainable) |
$iterable$.find(($item$) => {
// return true to find single item if it is in the collection
$END$
});
|
| c | Objects and classes: class (ES6) |
class $name$ {
constructor($arguments$) {
$END$
}
}
|
| cex | Objects and classes: child class (ES6 syntax) |
class $name$ extends $base$ {
constructor($arguments$) {
super($arguments$);
$END$
}
}
|
| cf | Objects and classes: class function (ES6 syntax) |
$fn_name$($arguments$) {
$END$
}
|
| kv | Objects and classes: key/value pair |
$key$: $value$ |
| m | Objects and classes: method (ES6 syntax) |
$method$($arguments$) {
$END$
}
|
| set | Objects and classes: setter (ES6 syntax) |
set $property$($value$) {
$END$
}
|
| proto | Objects and classes: prototype method (chainable) |
$class$.prototype.$method_name$ = function ($arguments$) {
$END$
};
|
| r | Returning values: return |
return $value$; |
| rth | Returning values: return this |
return this; |
| rn | Returning values: return null |
return null; |
| rt | Returning values: return true |
return true; |
| rf | Returning values: return false |
return false; |
| r0 | Returning values: return 0 |
return 0; |
| r-1 | Returning values: return -1 |
return -1; |
| rp | Returning values: return Promise (ES6) |
return new Promise((resolve, reject) => {
$END$
});
|
| S | Types: String |
String |
| N | Types: Number |
Number |
| O | Types: Object |
Object |
| A | Types: Array |
Array |
| D | Types: Date |
Date |
| Rx | Types: RegExp |
RegExp |
| tof | Types: typeof comparison |
typeof $source$ === '$type$'; |
| iof | Types: instanceof comparison |
$source$ instanceof $object$ |
| p | Promises: new Promise (ES6) |
new Promise((resolve, reject) => {
$END$
});
|
| then | Promises: Promise.then (chainable) |
$promise$.then(($value$) => {
$END$
});
|
| catch | Promises: Promise.catch (chainable) |
$promise$.catch(($err$) => {
$END$
});
|
| ex | ES6 modules: module export |
export $member$; |
| import | ES6 modules: module import |
import $END$ from '$module$'; |
| ima | ES6 modules: module import as |
import $exposed$ as $name$ from '$module$'; |
| imn | ES6 modules: named module export |
import { $name$ } from '$module$';
|
| desc | BDD testing (Mocha, Jasmine, etc.): describe |
describe('$description$', () => {
$END$
});
|
| ita | BDD testing (Mocha, Jasmine, etc.): asynchronous "it" |
it('$description$', (done) => {
$END$
});
|
| bef | BDD testing (Mocha, Jasmine, etc.): before |
before(() => {
$END$
});
|
| befe | BDD testing (Mocha, Jasmine, etc.): before each |
beforeEach(() => {
$END$
});
|
| after | BDD testing (Mocha, Jasmine, etc.): after |
after(() => {
$END$
});
|
| afte | BDD testing (Mocha, Jasmine, etc.): after each |
afterEach(() => {
$END$
});
|
| cl | Console: console.log |
console.log('$title$', $value$);
|
| cll | Console: console.log (text only) |
console.log($END$); |
| ce | Console: console.error |
console.error($END$); |
| cw | Console: console.error |
console.warn($END$); |
| st | Timers: setTimeout |
setTimeout(() => {
$END$
}, $delay$);
|
| si | Timers: setInterval |
setInterval(() => {
$END$
}, $delay$);
|
| sim | Timers: setInterval |
setImmediate(() => {
$END$
});
|
| ae | DOM specifics: addEventListener |
$document$.addEventListener('$event$', function(e) {
$END$
});
|
| gi | DOM specifics: getElementById |
$document$.getElementById('$id$');
|
| gc | DOM specifics: getElementByClassName |
Array.from($document$).getElementsByClassName('$class$');
|
| gt | DOM specifics: getElementByClassName |
Array.from($document$).getElementsByTagName('$class$');
|
| qs | DOM specifics: querySelector |
$document$.querySelector('$selector$');
|
| qsa | DOM specifics: querySelectorAll |
$document$.querySelectorAll('$selector$');
|
| cb | Node.js specifics: Node.js style callback |
(error, $value$) => { $END$ }
|
| re | Node.js specifics: require a module |
require('$module$');
|
| em | Node.js specifics: export member |
exports.$name$ = $value$; |
| me | Node.js specifics: module.exports |
module.exports = $name$; |
| on | Node.js specifics: attach an event handler (chainable) |
$emitter$.on('$event$', $arguments$) => {
$END$
});
|
| us | Miscellaneous: use strict |
'use strict'; |
| fn | Functions: named function |
function $name$($arguments$) {
$END$
}
|
Installation
macOS
There are two ways to install:
Using settings.jar
- File > Import Settings
- Select the settings.jar file
- Check Live templates in the Select Components to Import dialog
- Click ok in the Select Components to Import dialog
- Click ok when prompted to restart
Copying es6.xml
Put es6.xml inside of the following directory:
~/Library/Preferences/<intellij-product-install>/templates