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
control/command + space
loads the snippet suggestions if they aren't shown right away.
${1}
is where the snippet starts. $0
is where the snippet ends.
- 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}
}
(($1) => {
$0
})($1);
(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
- Copy and paste these two lines into your terminal
- 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