modern-javascript-snippets

Atom & VSCode - Modern javascript snippets for better productivity with support for JavaScript, Babel, TypeScript, JSX and semicolon-less code.

You might also be interested in always-done.

Highly opinionated to my needs - don't includes snippets that I don't use. But also is mixed between my previous Sublime javascript-charlike-snippets, standardjs-snippets and es6-javascript.

It uses standard style as base. But easily can be changed with a bit automation, so please open an issue if you want such thing.

The documentation is built and fully automated using verb, including table of contents and even the snippets docs.

Table of Contents

• Install
• Snippets
  • assert
  • async
  • classes
  • console
  • control-flow
  • declarations
  • events
  • functions
  • iterables
  • json
  • loops
  • misc
  • modules-commonjs
  • modules-es2015
  • objects
  • returns
  • testing
  • timers
  • types
• Related
• Contributing
• Building docs
• Running tests
• Author
• License

(TOC generated by verb using markdown-toc)

Install

Install with apm (Atom Editor's package manager)

$ apm install modern-javascript-snippets

Or launch VSCode Quick Open (Ctrl+P), paste the following command, and press enter.

ext install modern-javascript-snippets

Snippets

assert

All assert snippets

ase⇥ assert.strictEqual

${1:assert}.strictEqual(${2:actual}, ${3:expected})${0}

asn⇥ assert.notStrictEqual

${1:assert}.notStrictEqual(${2:actual}, ${3:expected})${0}

asd⇥ assert.deepStrictEqual

${1:assert}.deepStrictEqual(${2:actual}, ${3:expected})${0}

asdn⇥ assert.notDeepStrictEqual

${1:assert}.notDeepStrictEqual(${2:actual}, ${3:expected})${0}

asi⇥ assert.ifError

${1:assert}.ifError(${2:err})${0}

ast⇥ assert.throws

${1:assert}.throws(${2:actual}, ${3:expected})${0}

back to top

async

All async snippets

cb⇥ Node callback

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

p⇥ Promise constructor

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

then⇥ Promise.then

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

.then⇥ chain then

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

catch⇥ Promise.catch

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

.catch⇥ chain catch

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

back to top

classes

All classes snippets

cs⇥ class

class ${1:ClassName} {
  constructor (${2:args}) {
    ${3}
  }
}

csx⇥ class extends

class ${1:ClassName} extends ${2:BaseClass} {
  constructor (${3:args}) {
    super(${3:args})
    ${4}
  }
}

csm⇥ class method

${1:name} (${2:args}) {
  ${3}
}

csi⇥ es5 singleton class

function ${1:ClassName} (${2:args}) {
  if (!(this instanceof ${1:ClassName})) {
    return new ${1:ClassName}(${2:args})
  }
  ${3}
}

csf⇥ es5 function class

function ${1:ClassName} (${2:args}) {
  ${3}
}

back to top

console

All console snippets

cl⇥ console.log

console.log(${0})

ce⇥ console.error

console.error(${0})

cw⇥ console.warn

console.warn(${0})

cd⇥ console.dir

console.dir(${0})

back to top

control-flow

All control-flow snippets

if⇥ if statement

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

el⇥ else statement

else {
  ${1}
}

ife⇥ if/else statement

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

ei⇥ else if statement

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

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}
}

back to top

declarations

All declarations snippets

v⇥ var statement

var ${1:name}

v=⇥ var assignment

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

l⇥ let statement

let ${1:name}

l=⇥ let assignment

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

c⇥ const statement

const ${1:name}

c=⇥ const assignment

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

cy⇥ const yielded

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

ca⇥ const awaited

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

ly⇥ let yielded

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

la⇥ let awaited

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

co⇥ const object

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

ca⇥ const array

const ${1:name} = [
  ${2}
]

back to top

events

All events snippets

on⇥ on event handler

${1:emitter}.on('${2:event}', ${3:args})

.on⇥ chain .on

.on('${1:event}', ${2:handler})

once⇥ once event handler

${1:emitter}.once('${2:event}', ${3:args})

.once⇥ chain .once

.once('${1:event}', ${2:handler})

emit⇥ emit event

${1:emitter}.emit('${2:event}', ${3:args})

.emit⇥ chain .emit

.emit('${1:event}', ${2:args})

back to top

functions

All functions snippets

f⇥ anonymous function

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

fn⇥ named function

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

asf⇥ async anonymous function

async function (${1:args}) {${0}}

asfn⇥ async named function

async function ${1:name} (${2:args}) {${0}}

af⇥ arrow function

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

afn⇥ arrow fn with body

(${1:args}) => {${0}}

gf⇥ generator

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

gfn⇥ named generator

function * ${1:name} (${2:args}) {${0}}

iife⇥ immediately-invoked function expression

;(function (${1:args}) {
  ${0}
})(${2})

fa⇥ function apply

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

fc⇥ function call

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

fb⇥ function bind

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

back to top

iterables

All iterables snippets

fe⇥ forEach loop

${1:iterable}.forEach(${2:iterator})

.fe⇥ chain forEach

.forEach(${1:iterator})

map⇥ map

${1:iterable}.map(${2:iterator})

.map⇥ chain map

.map(${1:iterator})

reduce⇥ reduce

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

.reduce⇥ chain reduce

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

filter⇥ filter

${1:iterable}.filter(${2:iterator})

.filter⇥ chain filter

.filter(${1:iterator})

find⇥ find

${1:iterable}.find(${2:iterator})

.find⇥ chain find

.find(${1:iterator})

every⇥ every

${1:iterable}.every(${2:iterator})

.every⇥ chain every

.every(${1:iterator})

some⇥ some

${1:iterable}.some(${2:iterator})

.some⇥ chain some

.some(${1:iterator})

back to top

json

All json snippets

;⇥ JSON key/value pair

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

;a⇥ JSON array

"${1:key}": ["${2:values}"]

;t⇥ JSON true

"${1:key}": true

back to top

loops

All loops snippets

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})) {
    ${3}
  }
}

fo⇥ for of loop

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

wl⇥ while loop

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

wf⇥ fast while loop

let len = ${1:iterable}.length
let i = 0

while (i < len) {
  let val = ${1:iterable}[${2:i++}]
  ${0}
}

back to top

misc

All misc snippets

us⇥ use strict

'use strict'

self⇥ const self this

const self = this

ye⇥ yield

yield ${0}

aw⇥ await

await ${0}

pe⇥ process.exit

process.exit(${1:code})${0}

thn⇥ throw new error

throw new ${1:TypeError}('${2:message}')${3}

iferr⇥ if not typeof then throw error

if (typeof ${1:actual} !== ${2:expected}) {
  throw new ${3:TypeError}('${4:message}')
}${5}

js⇥ JSON.stringify()

JSON.stringify($0)

jp⇥ JSON.parse()

JSON.parse($0)

afi⇥ arrayify

/* istanbul ignore next */
const arrayify = (val) => {
  if (!val) return []
  if (Array.isArray(val)) return val
  return [val]
}

fixture⇥ fixture (useful for assert.throws)

function fixture () {
  ${1:fnName}
}${0}

back to top

modules-commonjs

All modules-commonjs snippets

req⇥ require module

require('${1:pkg}')${0}

rr⇥ const require package

const ${2:name} = require('${1:pkg}')${0}

em⇥ exports.member

exports.${1:member} = ${2:value}

emd⇥ exports default

exports['default'] = ${1:value}

me⇥ module.exports

module.exports = ${1:value}

med⇥ module exports and exports default

module.exports = exports['default'] = ${1:value}

back to top

modules-es2015

All modules-es2015 snippets

ex⇥ module export

export ${1:member}

exd⇥ module default export

export default ${1:member}

im⇥ import module

import ${2:name} from '${1:pkg}'${3}

ima⇥ import module as

import ${2:*} as ${3:name} from '${1:pkg}'${4}

imd⇥ import module destructured

import { $2 } from '${1:pkg}'${3}

back to top

objects

All objects snippets

kv⇥ key/value pair

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

proto⇥ prototype method

${1:ClassName}.prototype.${2:key} = ${3:value}

.proto⇥ chain prototype method

.prototype.${2:key} = ${3:value}

xa⇥ extend-shallow

See extend-shallow lib

extend(${1:defaults}, ${2:sources})${0}

oa⇥ Object.assign

Object.assign(${1:dest}, ${2:source})${0}

ok⇥ Object.keys

Object.keys(${1:obj})${0}

back to top

returns

All returns snippets

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

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

back to top

testing

All testing snippets

ita⇥ async test (mocha/mukla)

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

its⇥ synchronous test (mocha/mukla)

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

te⇥ tape-style test

${1:test}('${2:description}', (${3:t}) => {
  ${0}
})

back to top

timers

All timers snippets

st⇥ setTimeout

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

nt⇥ process.nextTick

process.nextTick(() => {
  ${0}
}${1:, args})

si⇥ setInterval

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

sim⇥ setImmediate

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

back to top

types

All types snippets

S⇥ String

String

Sy⇥ Symbol

Symbol('${1:name}')

B⇥ Boolean

Boolean

N⇥ Number

Number

O⇥ Object

Object

A⇥ Array

Array

D⇥ Date

Date

Rx⇥ RegExp

RegExp

P⇥ Promise

Promise

tof⇥ typeof equal to

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

tofi⇥ typeof not equal to

typeof ${1:source} !== '${2:value}'

iof⇥ instanceof

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

ia⇥ Array.isArray()

Array.isArray(${1:source})

back to top

Related

• always-done: Handle completion and errors with elegance! Support for streams, callbacks, promises, child processes, async/await and sync functions. A drop-in replacement… more | homepage
• dush-router: A simple regex-based router for dush, base, minibase and anything based on them. Works on Browser and Node.js | homepage
• dush: Microscopic & functional event emitter in ~350 bytes, extensible through plugins | homepage
• minibase: Minimalist alternative for Base. Build complex APIs with small units called plugins. Works well with most of the already existing… more | homepage
• try-catch-core: Low-level package to handle completion and errors of sync or asynchronous functions, using once and dezalgo libs. Useful for and… more | homepage

Contributing

Pull requests and stars are always welcome. For bugs and feature requests, please create an issue. Please read the contributing guidelines for advice on opening issues, pull requests, and coding standards. If you need some help and can spent some cash, feel free to contact me at CodeMentor.io too.

In short: If you want to contribute to that project, please follow these things

1. Please DO NOT edit README.md, CHANGELOG.md and .verb.md files. See "Building docs" section.
2. Ensure anything is okey by installing the dependencies and run the tests. See "Running tests" section.
3. Always use npm run commit to commit changes instead of git commit, because it is interactive and user-friendly. It uses commitizen behind the scenes, which follows Conventional Changelog idealogy.
4. Do NOT bump the version in package.json. For that we use npm run release, which is standard-version and follows Conventional Changelog idealogy.

Thanks a lot! :)

Building docs

Documentation and that readme is generated using verb-generate-readme, which is a verb generator, so you need to install both of them and then run verb command like that

$ npm install verbose/verb#dev verb-generate-readme --global && verb

Please don't edit the README directly. Any changes to the readme must be made in .verb.md.

Running tests

Clone repository and run the following in that cloned directory

$ npm install && npm test

Author

Charlike Mike Reagent

• github/tunnckoCore
• twitter/tunnckoCore
• codementor/tunnckoCore

License

Copyright © 2016-2017, Charlike Mike Reagent. Released under the MIT License.

---

This file was generated by verb-generate-readme, v0.6.0, on May 20, 2017.
Project scaffolded using charlike cli.