matt-auckland/vscode-js-snippets

JavaScript Snippets for Visual Studio Code

Download this extension from the Visual Studio Code Marketplace

Acknowledgements

JS Icon sourced from github.com/voodootikigod/logo.js JS Snippets sourced from github.com/xabikos/vscode-javascript and github.com/akamud/vscode-javascript-snippet-pack

Usage

A snippet pack to make you more productive working with JavaScript.

This extension ships a bunch of useful code snippets for the JavaScript and TypeScript editors.

Here's the full list of all the snippets:

Console

[cd] console.dir

console.dir(${1});

[ce] console.error

console.error(${1});

[ci] console.info

console.info(${1});

[cl] console.log

console.log(${1});

[cw] console.warn

console.warn(${1});

[de] debugger

debugger;

DOM

[ae] addEventListener

${1:document}.addEventListener('${2:load}', function(e) {
  ${3:// body}
});

[ac] appendChild

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

[rc] removeChild

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

[cel] createElement

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

[cdf] createDocumentFragment

${1:document}.createDocumentFragment();

[ca] classList.add

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

[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}';

[qs] querySelector

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

[qsa] querySelectorAll

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

Loop

[fe] forEach

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

Function

[fn] function

function ${1:methodName} (${2:arguments}) {
  ${3:// body}
}

[afn] anonymous function

function(${1:arguments}) {
  ${2:// body}
}

[pr] prototype

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

[iife] immediately-invoked function expression

(function(${1:window}, ${2:document}) {
  ${3:// body}
})(${1:window}, ${2:document});

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

JSON

[jp] JSON.parse

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

[js] JSON.stringify

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

Timer

[si] setInterval

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

[st] setTimeout

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

Misc

[us] use strict

"use strict";

[al] alert

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

[co] confirm

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

[pm] prompt

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

Import and export

Trigger	Content
imp→	imports entire module import fs from 'fs';
imn→	imports entire module without module name import 'animate.css'
imd→	imports only a portion of the module using destructing import {rename} from 'fs';
ime→	imports everything as alias from the module import * as localAlias from 'fs';
ima→	imports only a portion of the module as alias import { rename as localRename } from 'fs';
rqr→	require package require('');
req→	require package to const const packageName = require('packageName');
mde→	default module.exports module.exports = {};
env→	exports name variable export const nameVariable = localVariable;
enf→	exports name function export const log = (parameter) => { console.log(parameter);};
edf→	exports default function export default function fileName (parameter){ console.log(parameter);};
ecl→	exports default class export default class Calculator { };
ece→	exports default class by extending a base one export default class Calculator extends BaseClass { };

Class helpers

Trigger	Content
con→	adds default constructor in the class constructor() {}
met→	creates a method inside a class add() {}
pge→	creates a getter property get propertyName() {return value;}
pse→	creates a setter property set propertyName(value) {}

Various methods

Trigger	Content
fre→	forEach loop in ES6 syntax array.forEach(currentItem => {})
fof→	for ... of loop for(const item of object) {}
fin→	for ... in loop for(const item in object) {}
anfn→	creates an anonymous function (params) => {}
nfn→	creates a named function const add = (params) => {}
dob→	destructing object syntax const {rename} = fs
dar→	destructing array syntax const [first, second] = [1,2]
sti→	set interval helper method setInterval(() => {});
sto→	set timeout helper method setTimeout(() => {});
prom→	creates a new Promise return new Promise((resolve, reject) => {});
thenc→	adds then and catch declaration to a promise .then((res) => {}).catch((err) => {});

License

MIT License