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

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 { ${1} } from '${2: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 $1$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:params}) => {$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})

[cloo] alternative 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

${1:document}.addEventListener('${2:load}', ${3:()} => {
   $0
});

[ae] addEventListener

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

[qs] querySelector

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

[qsae] querySelect + addEventListener

${1:document}.querySelector('${2:selector}').addEventListener('${3:load}', ${4:()} => {
    $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}) {
	${3:// body}
}

[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",

[fetchget] simple fetch

const ${1:functionName} = async () => {
  const response = await fetch('${2:URL}');
  const data = await response.json();
  console.log(data);
};$0"

[fetchez] easy fetch with some options

const ${1:functionName} = async () => {
  const response = await fetch('${2:URL}', {
    method: '${3:*GET/POST/PUT/DELETE}',
    headers: {
      'Content-Type': 'application/json',
    },
  });
const data = await response.json();
console.log(data);${0}
};$0"

[fetchfull] fetch with all options (`*` means default)

const ${1:functionName} = async () => {
  const response = await fetch('${2:URL}', {
    method: '${3:*GET/POST/PUT/DELETE}',
    mode: '${4:*same-origin/cors/no-cors}',
    cache: '${5:default*/no-cache/reload/orce-cache/only-if-cached}',
    credentials: '${6:Credentials}',
    headers: {",
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    },
    redirect: '${6:*follow/manual/error}',
    referrer: '${7:*client, no-referrer}',
    body: JSON.stringify(${8:data}),
  });
const data = await response.json();
console.log(data);${0}
};

- 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');

const config = {
  entry: ['.${1:./src/index.js}']
  output: {
    path: resolve(__dirname, '${2:dist}'),
    filename: '${3:bundle.js}'
  }$0
};
module.exports = config;

[modulerules] setup module.rules for loaders

module: {
  rules: [
    {
      test: /\.${1:fileExtension}$/,
      use: $0
    }
  ]
}

[webpackmr] simple webpack setup with module.rules for loaders

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

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

module.exports = config;

[loader1] A single loader

{
  test: /\.${1:fileExtension}$/,
  use: '$2-loader'
}

[loader1options] A loader with options

{
  test: /\\.${1:fileExtension}$/,
  use: {
    loader: '$2-loader',
    options: {
      $0
    }
  }
}$0

[loader1exc] A loader with exclude

{
  test: /\.${1:fileExtension}$/,
  exclude: ${2:/node_modules/},
  use: '$3-loader'
}

[loader1inc] A loader with include

{
  test: /\.${1:fileExtension}$/,
  include: __dirname + '${2:dist}', 
  use: '$3-loader'
}

[loader2] Double loader

{
  test: /\.${1:fileExtension}$/,
  use: ['${2:loader1}', '${3:loader2}']
}

[loader2exc] Double loader with exclude

{
  test: /\.${1:fileExtension}$/,
  exclude: ${2:/node_modules/},
  use: ['$3-loader', '$4-loader']
}

[loader2inc] Double loader with include

{
  test: /\.${1:fileExtension}$/,
  include: __dirname + '${2:dist}', 
  use: ['$3-loader', '$4-loader']
}

[loader3] Triple loader

{
  test: /\.${1:fileExtension}$/,
  use: ['$2-loader', $3-loader, $4-loader]
}

[loader3exc] Triple loader with exclude

{
  test: /\.${1:fileExtension}$/,
  exclude: ${2:/node_modules/},
  use: ['$3-loader', '$4-loader', '$5-loader']
}

[loader3inc] Triple loader with include

{
  test: /\.${1:fileExtension}$/,
  include: __dirname + '${2:dist}', 
  use: ['$3-loader', '$4-loader', '$5-loader']
}

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

License

[MIT License]

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

Chris

ES6 JavaScript Snippets for Visual Studio Code

Supported languages (file extensions)

Hints

- Imports and Exports -

[req] require (Common JS)

[reqq] alternative require (Common JS)

[mex] module exports (Common JS)

[imp] import

[imn] import without module name

[imd] import destructuring

[ime] import everything as

[ima] import as

[exp] export default

[exd] export destructuring

[exa] export as

[enf] export named function

[edf] export default function

[ecl] export class

[ece] export class extends

- Console logging -

[cas] console.assert

[ccl] console.clear

[cco] console.count

[cdi] console.dir

[cer] console.error

[cgr] console.group

[cge] console.groupEnd

[ci] console.info

[cl] console.log

[clo] console.logObject

[cloo] alternative console.logObject

[ctr] console.trace

[ctm] console.time

[cte] console.timeEnd

[clt] console.table

[clt] console.table

[cw] console.warn

[de] debugger

- DOM -

[ae] addEventListener

[ae] addEventListener

[qs] querySelector

[qsae] querySelect + addEventListener

[qsa] querySelectorAll

[ac] appendChild

[rc] removeChild

[ce] createElement

[ctn] createTextNode

[cdf] createDocumentFragment

[ca] classList.add

[ct] classList.toggle

[cr] classList.remove

[gi] getElementById

[gc] getElementsByClassName

[gt] getElementsByTagName

[ga] getAttribute

[sa] setAttribute

[ra] removeAttribute

[ih] innerHTML

[tc] textContent

- Loops -

[fe] forEach

[fof] forOf

[fin] forIn

- Functions -

[afn] anonymous function

[fn] single line function

[fnn] single line function

[pr] prototype

[iifees6] immediately-invoked function expression

[iife] immediately-invoked function expression (ES5)

[call] function call

[apply] function apply

[ofn] function as a property of an object

[si] setInterval

[st] setTimeout

- JSON -

[jp] JSON.parse

[fetchfull] fetch with all options (`*` means default)