vscode-standardjs-snippets

0.7.9 • Public • Published

vscode-standardjs-snippets

originally forked from https://github.com/gaboesquivel/atom-standardjs-snippets, but we've added couple more. Also these are not using special characters because vscode doesn't accept them in the snippets.

Standard JavaScript Snippets for Visual studio code

A collection of ES6 snippets for faster JavaScript development in Visual studio Code.

This collection is complementary to atom/language-javascript. It's based on extrabacon/atom-turbo-javascript and it enforces standardjs code style.

js-standard-style

Yes!, no semicolons:

Making the snippets top priority

I mostly prefer snippets to have the top priority in the autocompletion. This is not a default settingm but can be enabled by:

"editor.snippetSuggestions": "top",

in your settings.json. Otherwise vscode prefers keywords on the top.

Snippets

Snippets are optimized to be short and easy to remember. Shortest are the ones you should be using most often. Note that these links work only on github, not on VSCode marketplace:

Declarations

v⇥ var statement

var ${1:name}

va⇥ var assignment

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

l⇥ let statement

let ${1:name}

la⇥ let assignment awaited

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

ly⇥ let yielded assignment

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

c⇥ const statement

const ${1:name}

cd⇥ const from destructuring

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

ca⇥ const assignment awaited

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

cy⇥ const yielded assignment

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

Flow Control

i⇥ if statement

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

te⇥ ternary statement

${1:cond} ? ${2:true} : ${3: false}

ta⇥ ternary statement

const ${0} = ${1:cond} ? ${2:true} : ${3: false}

el⇥ else statement

else {
  ${0}
}

ife⇥ else statement

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

}

ei⇥ else if statement

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

fl⇥ for loop (ES6)

for (let ${1:i} = 0, ${2:len} = ${3:iterable}.length ${1:i} < ${2:len}; ${1:i}++) {
  ${0}
}

fi⇥ for in loop (ES6)

for (let ${1:key} in ${2:source}) {
  if (${2:source}.hasOwnProperty(${1:key})) {
    ${0}
  }
}

fo⇥ for of loop (ES6)

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

wl⇥ while loop

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

wid⇥ while iteration decrementing

let ${1:array}Index = ${1:array}.length
while (${1:array}Index--) {
  ${0}
}

tc⇥ try/catch

try {
 ${0}
} catch (${1:err}) {

}

tf⇥ try/finally

try {
 ${0}
} finally {

}

tcf⇥ try/catch/finally

try {
  ${0}
} catch (${1:err}) {

} finally {

}

Functions

fan⇥ anonymous function

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

fn⇥ named function

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

asf⇥ async function

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

aa⇥ async arrow function with

async (${1:arguments}) => {
  ${0}
}

iife⇥ immediately-invoked function expression (IIFE)

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

fa⇥ function apply

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

fc⇥ function call

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

fb⇥ function bind

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

af⇥ arrow function (ES6)

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

fd⇥ arrow function with body (ES6)

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

f⇥ arrow function with body (ES6)

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

fr⇥ arrow function with return (ES6)

(${1:arguments}) => {
  return ${0}
}

gf⇥ generator function (ES6)

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

gfn⇥ named generator function (ES6)

function* ${1:name}(${1:arguments}) {
  ${0}
}

Iterables

fe⇥ forEach loop

${1:iterable}.forEach((${2:item}) => {
  ${0}
})

map⇥ map function

${1:iterable}.map((${2:item}) => {
  ${0}
})

reduce⇥ reduce function

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

filter⇥ filter function

${1:iterable}.filter((${2:item}) => {
  ${0}
})

find⇥ ES6 find function

${1:iterable}.find((${2:item}) => {
  ${0}
})

every⇥ every function

${1:iterable}.every((${2:item}) => {
  ${0}
})

some⇥ some function

${1:iterable}.some((${2:item}) => {
  ${0}
})

Objects and classes

cs⇥ class (ES6)

class ${1:name} {
  constructor(${2:arguments}) {
    ${0}
  }
}

csx⇥ extend a class (ES6)

class ${1:name} extends ${2:base} {
  constructor(${2:arguments}) {
    super(${2:arguments})
    ${0}
  }
}

m⇥ method (ES6 syntax)

${1:method} (${2:arguments}) {
  ${0}
}

get⇥ getter (ES6 syntax)

get ${1:property} () {
  ${0}
}

set⇥ setter (ES6 syntax)

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

gs⇥ getter and setter (ES6 syntax)

get ${1:property} () {
  ${0}
}
set ${1:property} (${2:value}) {

}

proto⇥ prototype method

${1:Class}.prototype.${2:methodName} = function (${3:arguments}) {
  ${0}
}

ok Object.keys

Object.keys(${1:obj})

oc Object.create

Object.create(${1:obj})

oa Object.assign

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

og Object.getOwnPropertyDescriptor

Object.getOwnPropertyDescriptor(${1:dest}, '${2:prop}')

od Object.defineProperty

Object.defineProperty(${1:dest}, '${2:prop}', {
  ${0}
})

Returning values

r⇥ return

return ${0}

rt⇥ return this

return this

rn⇥ return null

return null

ro⇥ return new object

return {
  ${0}
}

ra⇥ return new array

return [
  ${0}
]

rp⇥ return Promise (ES6)

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

tof⇥ typeof comparison

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

tf⇥ this

this.

iof⇥ instanceof comparison

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

ia⇥ isArray

Array.isArray(${1:source})

Promises

pa⇥ Promise.all

Promise.all(${1:value})

p⇥ new Promise (ES6)

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

pt⇥ Promise.then

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

pc⇥ Promise.catch

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

ES6 modules

e⇥ module export

export ${1:member}

ed⇥ module default export

export default ${1:member}

edf⇥ module default export function

export default function ${1:name} (${2:arguments}) {\n\t${0}\n}

ec⇥ module export const

export const ${1:member} = ${2:value}

im⇥ module import

import ${1:*} from '${2:module}'

ia⇥ module import as

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

id⇥ module import destructuring

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

BDD testing (Mocha, Jasmine, etc.)

desc⇥ describe

describe('${1:description}', function () {
  ${0}
})

it⇥ asynchronous "it"

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

itd⇥ "it" with callback

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

its⇥ "it" synchronous

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

bf⇥ before test suite

before(function () {
  ${0}
})

bfe⇥ before each test

beforeEach(function () {
  ${0}
})

aft⇥ after test suite

after(function () {
  ${0}
})

afe⇥ after each test

afterEach(function () {
  ${0}
})

Timers

st⇥ setTimeout

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

si⇥ setInterval

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

sim⇥ setImmediate

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

DOM

ae⇥ addEventListener

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

rel⇥ removeEventListener

${1:document}.removeEventListener('${2:event}', ${3:listener})

evc dom event cancel default and propagation

ev.preventDefault()
ev.stopPropagation()
return false

gi⇥ getElementById

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

gc⇥ getElementsByClassName

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

gt⇥ getElementsByTagName

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

qs⇥ querySelector

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

qsa⇥ querySelectorAll

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

cdf⇥ createDocumentFragment

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

cel⇥ createElement

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

ac⇥ appendChild

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

rc⇥ removeChild

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

cla⇥ classList.add

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

ct⇥ classList.toggle

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

clr⇥ classList.remove

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

ga⇥ getAttribute

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

sa⇥ setAttribute

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

ra⇥ removeAttribute

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

Node.js

cb⇥ Node.js style callback

function (err, ${1:value}) {
  if (err) throw err
  t${0}
}

rq⇥ require a module

require('${1:module}')

cr⇥ require and assign a module

const ${1:module} = require('${1:module}')

em⇥ export member

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

me⇥ module.exports

module.exports = ${1:name}

on⇥ attach an event handler

${1:emitter}.on('${2:event}', (${3:arguments}) => {
  ${0}
})

Miscellaneous

us⇥ use strict

'use strict'

js⇥ JSON Stringify

JSON.stringify($0)

jp⇥ JSON Parse

JSON.parse($0)

a⇥ await

await ${0}

apa⇥ Promise.all

await Promise.all(${1:value})

apm⇥ Promise.all map

await Promise.all(${1:array}.map((${2:value}) => {\n\t${0}\n}))

Console

cl⇥ console.log

console.log(${0})

cv⇥ console.log

console.log('${0}:', ${0})

ce⇥ console.error

console.error(${0})

cw⇥ console.warn

console.warn(${0})

cod⇥ console.dir

console.dir(${0})

React snippets

Why do we include them here?

If you're not writing react, including them should not really bother you because they are not short as the regular JS snippets. ALso IMHO react is the leading solution for FE apps deserves to be included by default, because any JS dev will have to write some react eventually over the course of his/her careeer. By having them in a single package we can easily make sure --there aren't any conflicts in the trigger prefixes.

Supported languages (file extensions)

  • JavaScript (.js)
  • TypeScript (.ts)
  • JavaScript React (.jsx)
  • TypeScript React (.tsx)

These were taken from https://github.com/TimonVS/vscode-react-standard because the maintainer wasn't able to publish a new version for months even when there was a considerable flaw in the released version. Below is a list of all available snippets and the triggers of each one. The means the TAB key.

Trigger Content
j→ jsx element
dp→ destructuring of props
ds→ destructuring of props
jc→ jsx self-closed element
jm→ jsx elements map
jmr→ jsx elements map with return
rcc→ class component skeleton
rccp→ class component skeleton with prop types after the class
rcjc→ class component skeleton without import and default export lines
rcfc→ class component skeleton that contains all the lifecycle methods
rsc→ stateless component skeleton
rscp→ stateless component with prop types skeleton
rpt→ empty propTypes declaration
con→ class default constructor with props
conc→ class default constructor with props and context
est→ empty state object
cwm→ componentWillMount method
cdm→ componentDidMount method
cwr→ componentWillReceiveProps method
cgd→ componentGetDerivedStateFromProps method
scu→ shouldComponentUpdate method
cwup→ componentWillUpdate method
cdup→ componentDidUpdate method
cwun→ componentWillUnmount method
ren→ render method
sst→ this.setState with object as parameter
ssf→ this.setState with function as parameter
tp this.props
ts this.state
bnd→ binds the this of method inside the constructor

There are also snippets to be triggered with a text selection(trigger via insert snippet command):

jsx element wrap selection

The following table lists all the snippets that can be used for prop types. Every snippet regarding prop types begins with pt so it's easy to group it all together and explore all the available options. On top of that each prop type snippets has one equivalent when we need to declare that this property is also required. For example pta creates the PropTypes.array and ptar creates the PropTypes.array.isRequired

Trigger Content
pta→ PropTypes.array,
ptar→ PropTypes.array.isRequired,
ptb→ PropTypes.bool,
ptbr→ PropTypes.bool.isRequired,
ptf→ PropTypes.func,
ptfr→ PropTypes.func.isRequired,
ptn→ PropTypes.number,
ptnr→ PropTypes.number.isRequired,
pto→ PropTypes.object.,
ptor→ PropTypes.object.isRequired,
pts→ PropTypes.string,
ptsr→ PropTypes.string.isRequired,
ptnd→ PropTypes.node,
ptndr→ PropTypes.node.isRequired,
ptel→ PropTypes.element,
ptelr→ PropTypes.element.isRequired,
pti→ PropTypes.instanceOf(ClassName),
ptir→ PropTypes.instanceOf(ClassName).isRequired,
pte→ PropTypes.oneOf(['News', 'Photos']),
pter→ PropTypes.oneOf(['News', 'Photos']).isRequired,
ptet→ PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
ptetr→ PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
ptao→ PropTypes.arrayOf(PropTypes.number),
ptaor→ PropTypes.arrayOf(PropTypes.number).isRequired,
ptoo→ PropTypes.objectOf(PropTypes.number),
ptoor→ PropTypes.objectOf(PropTypes.number).isRequired,
ptsh→ PropTypes.shape({color: PropTypes.string, fontSize: PropTypes.number}),
ptshr→ PropTypes.shape({color: PropTypes.string, fontSize: PropTypes.number}).isRequired,

Dependencies (0)

    Dev Dependencies (0)

      Package Sidebar

      Install

      npm i vscode-standardjs-snippets

      Weekly Downloads

      1

      Version

      0.7.9

      License

      MIT

      Unpacked Size

      55.1 kB

      Total Files

      8

      Last publish

      Collaborators

      • capaj