ES6 JavaScript Snippets

ES6 JavaScript Snippets for Visual Studio Code

A JS snippets pack largely inspired by other snippet extensions on VSCode (Charalampos Karypidis, Mahmoud Ali, Dsznajder) but with a few of my own twists and added snippets !! :)

Supported languages (file extensions)

• JavaScript (.js)
• TypeScript (.ts)
• JavaScript React (.jsx)
• TypeScript React (.tsx)
• Html (.html)
• Vue (.vue) (Vetur extension required)

Hints

1. control/command + space loads the snippet suggestions if they aren't shown right away.
2. ${1} is where the snippet starts. $0 is where the snippet ends.
3. Press tab to move onto the next part of a snippet.

---

- Imports and Exports -

[req] require (Common JS)

const ${1:package} = require('${1:package}');$0

[reqq] alternative require (Common JS)

const ${1:package} = require('${2:filePath}');$0

[mex] module exports (Common JS)

module.exports = {$0};

[imp] import

import ${1:moduleName} from '${2:module}';$0

[imn] import without module name

import '${1:module}';$0

[imd] import destructuring

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

[ime] import everything as

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

[ima] import as

import { ${1:originalName} as ${2:alias} } from '${3:module}';$0

[exp] export default

export default $0;

[exd] export destructuring

export { ${1} } from '${2:module}'$0

[exa] export as

export { ${1:originalName} as ${2:alias} } from '${3:module}';$0

[enf] export named function

export const ${1:functionName} = (${2:params}) => {$0};

[edf] export default function

export default ($1) => {$0};

[ecl] export class

export default class ${1:className};$0

[ece] export class extends

export default class ${1:className} extends ${2:baseclassName};$0

- Console logging -

[cas] console.assert

console.assert(${1:expression}, ${2:object})

[ccl] console.clear

console.clear()

[cco] console.count

console.count(${1:label})

[cdi] console.dir

console.dir(${1});

[cer] console.error

console.error(${1});

[cgr] console.group

console.group(\"${1:label}\")

[cge] console.groupEnd

console.groupEnd()

[ci] console.info

console.info(${1});

[cl] console.log

console.log(${1});

[clo] console.logObject

console.log('${1:object}', ${1:object})

[ctr] console.trace

console.trace(${1:object})

[ctm] console.time

console.time('${1:object}')

[cte] console.timeEnd

console.timeEnd('${1:object}')

[clt] console.table

console.table(${1:object});

[clt] console.table

console.table(${1:object});

[cw] console.warn

console.warn(${1:object})

[de] debugger

debugger;

- DOM -

[ae] addEventListener

addEventListener('${1:load}', $0)

[qs] querySelector

${1:document}.querySelector('$0')

[qsae] querySelect + addEventListener

${1:document}.querySelector('${2:selector}').addEventListener('${3:load}', $0)

[qsa] querySelectorAll

${1:document}.querySelectorAll('${2:selector}');$0

[ac] appendChild

${1:document}.appendChild(${2:elem});$0

[rc] removeChild

${1:document}.removeChild(${2:elem});$0

[ce] createElement

${1:document}.createElement(${2:elem});$0

[ctn] createTextNode

${1:document}.createTextNode('$2');$0

[cdf] createDocumentFragment

${1:document}.createDocumentFragment()$0;

[ca] classList.add

${1:document}.classList.add('${2:class}');$0

[ct] classList.toggle

${1:document}.classList.toggle('${2:class}');

[cr] classList.remove

${1:document}.classList.remove('${2:class}');

[gi] getElementById

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

[gc] getElementsByClassName

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

[gt] getElementsByTagName

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

[ga] getAttribute

${1:document}.getAttribute('${2:attr}');

[sa] setAttribute

${1:document}.setAttribute('${2:attr}', ${3:value});

[ra] removeAttribute

${1:document}.removeAttribute('${2:attr}');

[ih] innerHTML

${1:document}.innerHTML = '${2:elem}';

[tc] textContent

${1:document}.textContent = '${2:content}';

- Loops -

[fe] forEach

${1:array}.forEach(function(item) {
  ${2:// body}
});

[fof] forOf

${1:array}.forEach(function(item) {
  ${2:// body}
});

[fin] forIn

${1:array}.forEach(function(item) {
  ${2:// body}
});

- Functions -

[afn] anonymous function

(${1:arguments}) => {
  ${2:// body}
}

[fn] single line function

const ${1:methodName} = ${2:arg} => {$3}

[fnn] single line function

const ${1:methodName} = (${2:args}) => {
  $0
}

[pr] prototype

${1:object}.prototype.${2:method} = function(${3:arguments}) {
  ${4:// body}
}

[iifees6] immediately-invoked function expression

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

[iife] immediately-invoked function expression (ES5)

(function ($1) {
  $0
})($1);

[call] function call

${1:method}.call(${2:context}, ${3:arguments})

[apply] function apply

${1:method}.apply(${2:context}, [${3:arguments}])

[ofn] function as a property of an object

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

[si] setInterval

setInterval(function() {
	${0:// body}
}, ${1:1000});

[st] setTimeout

setTimeout(function() {
	${0:// body}
}, ${1:1000});

- JSON -

[jp] JSON.parse

JSON.parse(${1:obj});

[js] JSON.stringify

JSON.stringify(${1:obj});

- Asynchronous -

[prom] promise

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

[thenc] then / catch

.then((${1:result}) => {${2}}).catch((${3:err}) => {${4}};

[promtc] promise with then catch

const promise = new Promise((resolve, reject) => {
  $1
}).then((${2:result}) => {
  $3
}).catch((${4:err}) => {
  $5
});$0",

[nodefetch] node fetch

const fetch = require('node-fetch')

fetch(${1:URL}).then(res => res.json).then(console.log)

[clientfetch] client fetch

fetch(${1:URL}).then(res => res.json).then(console.log)

- Classes -

[cla1] simple class (1 prop)

class ${1:className} {
  constructor(${2:firstProp}) {
    this.${2:firstProp} = ${2:firstProp};
  }
  $0
}

[cla2] simple class (add up to 2 props)

class ${1:className} {
  constructor(${2:firstProp}, {3:secondProp}) {
    this.${2:firstProp} = ${2:firstProp};
    this.${3:secondProp} = ${3:secondProp};
  }
  $0
}

[cla3] simple class (add up to 3 props)

class ${1:className} {
  constructor(${2:firstProp}, {3:secondProp}, {4:thirdProp}) {
    this.${2:firstProp} = ${2:firstProp};
    this.${3:secondProp} = ${3:secondProp};
    this.${4:thirdProp} = ${4:thirdProp};
  }
  $0
}

[clex] extended class

class ${1:className} extends ${2:parentClass} {
  constructor(${3:parentProps}) {
    super(${3:parentProps});
    ${0}
  }
}

[con] constructor

constructor(${1:params}) {${0}}

[met] method

${1:methodName}(${2:params}) {${0}}

[pge] propertyGet

get ${1:propertyName}() {return this.${0}}

[pse] propertySet

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

- Webpack -

[webpack] simple webpack setup

const { resolve } = require('path');

module.exports = {
  entry: ${1:'./src/index.js'},
  output: {
    path: resolve(__dirname, ${2:'./dist'}),
    filename: '${3:[name].bundle.js}'
  },
  module: {
    rules: [
      test: /\\.${4:fileExtension}$/",
      use: $0
    ]
  }
};

- Misc -

[dob] destructuring object

const {${1:propertyName}} = ${2:objectToDestructFrom}

[dar] destructuring array

const {${1:propertyName}} = ${2:arrayToDestructFrom}

[stric] use strict

'use strict';

[al] alert

alert('${1:msg}');

[co] confirm

confirm('${1:msg}');

[pm] prompt

prompt('${1:msg}');

[expr] simple express setup

const express = require('express')
const app = express();
const port = process.env.PORT || {$1: 5000}

app.get('/', (req, res) => res.send('Hey there!'));

app.listen(port, () => { console.log('Server has started on port ${port}!!!'); });

[gitbashssh] setup ssh-agent to save your password in your current terminal

eval $(ssh-agent -s)
ssh-add ~/.ssh/id_rsa

1. Copy and paste these two lines into your terminal
2. Push code to github without re-entering you password

[q] fills in quokka.js query string

/*?*/

License

[MIT License]

The extension can be found on the marketplace @ https://marketplace.visualstudio.com/items?itemName=Cjay.es6-javascript-snippets