es6-javascript

A collection of commands and ES6 focused snippets for optimizing modern Javascript development productivity.

hharnisc

197,677

158

1.0.0

MIT

GitHub

es6-javascript

A collection of commands and ES6 focused snippets for optimizing modern Javascript development productivity. It aims to be compliant with AirBnB's mostly reasonable approach to Javascript.

Note: this is a fork of turbo-javascript that uses arrow functions by default and adds a few more snippets for chai and classes for convenience.

Changelog

Version 1.0.0

If you need double quotes please downgrade apm install es6-javascript@0.7.0

Commands

Use the following keymaps to speed up your development. You can quickly terminate lines with semicolons or manipulate blocks of code with ease.

End Line CTRL-;

Terminates the current line with a semicolon.

End Line with a comma CTRL-,

Terminates the current line with a comma (great for object literals).

End New Line CTRL-ENTER

Terminates the current line with a colon or semicolon, followed with a new line. A comma is inserted when the cursor is inside an object literal, otherwise a semicolon is inserted.

Easy Blocks CTRL-B

Creates a statement block { ... } with the selected text placed inside and properly indented. If the selection is already wrapped with a block, the block is removed and its content is unindented.

Snippets

Snippets are optimized to be short and easy to remember. Some snippets are "chainable" and render differently when preceded by a ".".

For example, .fe renders a chain-friendly version of the forEach snippet, while fe renders a full code block.

Declarations

v⇥ var statement

var ${1:name};

ve⇥ var assignment

var ${1:name} = ${2:value};

l⇥ let statement

let ${1:name};

le⇥ let assignment

let ${1:name} = ${2:value};

co⇥ const statement

const ${1:name};

coe⇥ const assignment

const ${1:name} = ${2:value};

cos⇥ const symbol

const ${1:name} = Symbol('${1:name}');

Flow Control

if⇥ if statement

if (${1:condition}) {
  ${0}
}

el⇥ else statement

else {
  ${0}
}

ife⇥ else statement

if (${1:condition}) {
  ${2}
} else {
  ${3}
}

ei⇥ else if statement

else if (${1:condition}) {
  ${0}
}

fl⇥ for loop

for (let ${1:i} = 0; ${1:i} < ${2:iterable}${3:.length}; ${1:i}++) {
  ${4}
}

fi⇥ for in loop

for (let ${1:key} in ${2:source}) {
  if (${2:source}.hasOwnProperty(${1:key})) {
    ${0}
  }
}

fo⇥ for of loop (ES6)

for (let ${1:key} of ${2:source}) {
  ${0}
}

wl⇥ while loop

while (${1:condition}) {
  ${0}
}

tc⇥ try/catch

try {
  ${1}
} catch (${2:err}) {
  ${3}
}

tf⇥ try/finally

try {
 ${1}
} finally {
 ${2}
}

tcf⇥ try/catch/finally

try {
  ${1}
} catch (${2:err}) {
  ${3}
} finally {
  ${4}
}

Functions

f⇥ anonymous function

function (${1:arguments}) {${0}}

fn⇥ named function

function ${1:name}(${2:arguments}) {
  ${0}
}

iife⇥ immediately-invoked function expression (IIFE)

((${1:arguments}) => {
  ${0}
})(${2});

fa⇥ function apply

${1:fn}.apply(${2:this}, ${3:arguments})

fc⇥ function call

${1:fn}.call(${2:this}, ${3:arguments})

fb⇥ function bind

${1:fn}.bind(${2:this}, ${3:arguments})

af⇥ arrow function (ES6)

${1:(arguments)} => ${2:statement}

afb⇥ arrow function with body (ES6)

${1:(arguments)} => {
\t${0}
}

gf⇥ generator function (ES6)

function* (${1:arguments}) {
  ${0}
}

gfn⇥ named generator function (ES6)

function* ${1:name}(${1:arguments}) {
  ${0}
}

Iterables

fe⇥ forEach loop (chainable)

${1:iterable}.forEach((${2:item}) => {
  ${0}
});

map⇥ map function (chainable)

${1:iterable}.map((${2:item}) => {
  ${0}
});

reduce⇥ reduce function (chainable)

${1:iterable}.reduce((${2:previous}, ${3:current}) => {
  ${0}
}${4:, initial});

filter⇥ filter function (chainable)

${1:iterable}.filter((${2:item}) => {
  ${0}
});

find⇥ ES6 find function (chainable)

${1:iterable}.find((${2:item}) => {
  ${0}
});

Objects and classes

c⇥ class (ES6)

class ${1:name} {
  constructor(${2:arguments}) {
    ${0}
  }
}

cex⇥ child class (ES6)

class ${1:name} extends ${2:base} {
  constructor(${2:arguments}) {
    super(${2:arguments})
    ${0}
  }
}

cf⇥ class function (ES6)

{$1:name}({$2:arguments}) {
  ${0}
}

kv⇥ key/value pair

Javascript:

${1:key}: ${2:'value'}

m⇥ method (ES6 syntax)

${1:method}(${2:arguments}) {
  ${0}
}

get⇥ getter (ES6 syntax)

get ${1:property}() {
  ${0}
}

set⇥ setter (ES6 syntax)

set ${1:property}(${2:value}) {
  ${0}
}

gs⇥ getter and setter (ES6 syntax)

get ${1:property}() {
  ${0}
}
set ${1:property}(${2:value}) {

}

proto⇥ prototype method (chainable)

${1:Class}.prototype.${2:methodName} = function (${3:arguments}) {
  ${0}
};

Returning values

r⇥ return

return ${0};

rth⇥ return this

return this;

rn⇥ return null

return null;

rt⇥ return true

return true;

rf⇥ return false

return false;

r0⇥ return 0

return 0;

r-1⇥ return -1

return -1;

rp⇥ return Promise (ES6)

return new Promise((resolve, reject) => {
  ${0}
});

Types

S⇥ String

N⇥ Number

O⇥ Object

A⇥ Array

D⇥ Date

Rx⇥ RegExp

tof⇥ typeof comparison

typeof ${1:source} === '${2:undefined}'

iof⇥ instanceof comparison

${1:source} instanceof ${2:Object}

Promises

p⇥ new Promise (ES6)

new Promise((resolve, reject) => {
  ${0}
})

then⇥ Promise.then (chainable)

${1:promise}.then((${2:value}) => {
  ${0}
});

catch⇥ Promise.catch (chainable)

${1:promise}.catch((${2:err}) => {
  ${0}
});

ES6 modules

ex⇥ module export

export ${1:member};

im⇥ module import

import ${1:*} from '${2:module}';

ima⇥ module import as

import ${1:*} as ${2:name} from '${3:module}';

imn⇥ named module import

import \{ ${1:name} \} from '${2:module}';

BDD testing (Mocha, Jasmine, etc.)

desc⇥ describe

describe('${1:description}', () => {
  ${0}
});

its⇥ synchronous "it"

it('${1:description}', () => {
  ${0}
});

ita⇥ asynchronous "it"

it('${1:description}', (done) => {
  ${0}
});

bef⇥ before

before(() => {
  ${0}
});

befe⇥ beforeEach

beforeEach(() => {
  ${0}
});

aft⇥ after

after(() => {
  ${0}
});

afte⇥ afterEach

afterEach(() => {
  ${0}
});

Console

cl⇥ console.log

console.log('${1:title}', ${2:$1}$0);

cll⇥ console.log (text only)

console.log(${0});

ce⇥ console.error

console.error(${0});

cw⇥ console.warn

console.warn(${0});

Timers

st⇥ setTimeout

setTimeout(() => {
  ${0}
}, ${1:delay});

si⇥ setInterval

setTimeout(() => {
  ${0}
}, ${1:delay});

sim⇥ setInterval

setImmediate(() => {
  ${0}
});

DOM specifics

ae⇥ addEventListener

${1:document}.addEventListener('${2:event}', function (e) {
  ${0}
});

gi⇥ getElementById

${1:document}.getElementById('${2:id}')

gc⇥ getElementsByClassName

Array.from(${1:document}.getElementsByClassName('${2:class}'))

Array.from polyfill required for ES5

gt⇥ getElementsByTagName

Array.from(${1:document}.getElementsByTagName('${2:tag}'))

Array.from polyfill required for ES5

qs⇥ querySelector

${1:document}.querySelector('${2:selector}')

qsa⇥ querySelectorAll

Array.from(${1:document}.querySelectorAll('${2:selector}'))

Array.from polyfill required for ES5

Node.js specifics

cb⇥ Node.js style callback

(err${1:, value}) => {${0}}

re⇥ require a module

require('${1:module}');

em⇥ export member

exports.${1:name} = ${2:value};

me⇥ module.exports

module.exports = ${1:name};

on⇥ attach an event handler (chainable)

${1:emitter}.on('${2:event}', (${3:arguments}) => {
  ${0}
});

Miscellaneous

us⇥ use strict

'use strict';

License

The MIT License (MIT)