capaj/vscode-standardjs-snippets

a complete set of Javascript snippets for Visual Studio Code

vscode-standardjs-snippets

Optinionated set of JS 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 javascript and react 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.

Code style

Yes!, no semicolons:

• Are Semicolons Necessary in JavaScript?
• An Open Letter to JavaScript Leaders Regarding Semicolons
• JavaScript Semicolon Insertion - Everything You Need to Know

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
• flow control
• functions
• iterables
• objects and classes
• returning values
• types
• promises
• ES6 modules
• testing
• console
• timers
• DOM
• Node.js
• miscellaneous

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}

cd⇥ const from destructuring awaited

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

cf⇥ const arrow function assignment

const ${1:name} = (${2:arguments}) => {\n\treturn ${0}\n}

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 assignment

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 (const ${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})

aiife⇥ async immediately-invoked function expression

very useful when you don't have top level await(node 16 and lower)

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

af⇥ arrow function (ES6)

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

afi⇥ arrow function identity

;(v) => v

fd⇥ arrow function with destructuring

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

fdr⇥ arrow function with destructuring returning destructured

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

f⇥ arrow function with body (ES6)

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

fr⇥ arrow function with return (ES6)

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

fro⇥ arrow function with single returned object

(${1:arguments}) => ({
  ${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}
})

mapsd⇥ map single desctructured argument

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

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

ov Object.values

Object.values(${1:obj})

oe Object.entries

Object.entries(${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

rf⇥ return arrow function

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

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}

ef⇥ module export const

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

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

dt describe top level

describe('${TM_FILENAME_BASE}', 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});

heac⇥ appendChild

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

herc⇥ removeChild

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

hecla⇥ classList.add

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

hect⇥ classList.toggle

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

heclr⇥ classList.remove

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

hega⇥ getAttribute

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

hesa⇥ setAttribute

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

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

uss⇥ 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((async ${2:value}) => {\n\t${0}\n}))

ast⇥ Promise sleep

await new Promise((r) => setTimeout(r, ${0}))

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

Are only enabled in jsx or tsx files. If you write your jsx in js files, you need to copy the react.json files manually and add it to your custom 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 originally 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.

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
rfc	functional component. Prefer for 99% of new react component
rfce	functional component with emotion css import
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
rfcp	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
us	useState
ue	useEffect
uec	useEffect with a cleanup function
ur	useRef
cc	createContext
uc	useContext
ume	useMemo
-------	----------------------------------------------------------------
uq	useQuery to be used with graphql-codegen
uqc	useQuery that loads up data for current component, to be used with graphql-codegen
um	useMutation to be used with graphql-codegen
uqg	useQuery with raw gql
umg	useMutation with raw gql

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

jsx element wrap selection

vscode-standardjs-snippets's Issues

class constructor space-before-function-paren and semi

Hi, thanks for this awesome extension.

I found that cs and csx has some styling issue that standardjs will complain about...

1. The constructor and () is missing a space.
2. The super(arguments); has an extra semicolon.

Add console.table

cta⇥ console.table

feature request: consider path snippets

pj => path.join($1)
pr => path.resolve($1)
pdr => path.resolve(__dirname, $1)

...etc!

Breaks emmet in jsx files

I have narrowed it down to this plugin.

When I am editing jsx and type div + [tab] i expect it to create <div></div>

Instead div is output

if you tab again div name

vscode 1.13.1

If you need more info let me know

`cdf` snippet for `document.createDocumentFragment` has unneeded parameter

vscode-standardjs-snippets/snippets/javascript.json

Lines 170 to 173 in 76a82d4

	"createDocumentFragment": {
	"prefix": "cdf",
	"body": "${1:document}.createDocumentFragment(${2:elem})"
	},

The cdf snippet, which creates a document.createDocumentFragment call, has a tab stop for a parameter elem. However, document.createDocumentFragment does not have any parameters.

I suggest the following:

    "createDocumentFragment": { 
      "prefix": "cdf", 
-     "body": "${1:document}.createDocumentFragment(${2:elem})" 
+     "body": "${1:document}.createDocumentFragment()$2" 
    }, 

feature request: redux snippets

Hi, this is my first try of using this extension and I fall in love with it immediately!
It would be even better if it supports redux snippets, such as connect(), mapStateToProps() etc.
Does anyone planned to add this feature, or it is already there but I didn't find it?

Can it be customized? Or console.log supercharged

I want to have cl become console.log('${0}:', ${0}) with double cursor activated.

1. Is there a chance to do so
2. can you put it officially
3. (how) can I hack the extension for my use only

Add region/endregion snippets

I'm using the #region and #endregion feature/support in vscode frequently, and standard is complaining about what the default vscode JavaScript language service snippets insert (leaving no space or tab charcter between the // and the #).

vscode default when typing #r and selecting the #region proposal:
//#region
what is needed to satisfy standard:
// #region (with a trailing space character to enforce typing in some meaningful description)

vscode default when typing #e and selecting the #endregion proposal:
//#endregion
what is needed to satisfy standard:
// #endregion

I currently solve this by including a custom .code-snippets files in my projects with the following content:

{
	"Folding Region Start (JavaScript Standard Style)": {
		"scope": "javascript",
		"prefix": "#region",
		"body": [
			"// #region "
		]
	},
	"Folding Region End (JavaScript Standard Style)": {
		"scope": "javascript",
		"prefix": "#endregion",
		"body": [
			"// #endregion"
		]
	}
}

Best regards
Thorben

Tabstop optimize

There are some tab positions bugs, $2 is ignored when tab after $1 complete.

    "const statement from destructuring": {
        "prefix": "cd",
        "body": "const { ${2:prop} } = ${1:value}"
    },

According to this doc https://code.visualstudio.com/docs/editor/userdefinedsnippets#_tabstops

$2 should be changed to $0

    "const statement from destructuring": {
        "prefix": "cd",
        "body": "const { ${0:prop} } = ${1:value}"
    },

I tried and it works well

add edfn

export default named function

How to enable?

I'm working with the atom snippets plugin for a while. After installing and restarting, I type cl or ase, I get vscode completes, not standard snippets. ase => case / cl => class

How do I enable this plugin / how does it work?

feature request: provide a way to disable react snippets

I am not writing react, and the snippets always get in the way in the suggest drop down. It'd be nice to be able to disable them. Thanks.

console.log snippets has change?

If the snippets shortcuts key has change would you like to fix the introduce

fd is not arrow function with body

In here I believe fd shoud be destructured arrow function instead of arrow function with body

Add console.dir

no final tab to take me "after the snippet"

Every other snippets source I tried has been set up like this:

if (<first tab here>) {
  <second tab here>
}<third tab here>

This is really useful because then I can tab after a snippet and chain to another snippet, i.e. after the third tab here I could use an else snippet or an else if snippet. All this snippets in this repo end at <second tab here> and then the next time I hit tab I get a literal tab character.

For me this was a deal breaker, I ended up forking the repo and editing all the snippets I was using. I wonder if there's a good reason for this? Am I doing something wrong? Are the other snippet providers doing something wrong? Or is this just inconvenient?

fb (function bind) snippet doesn't work

The documentation on the vscode marketplace contains "fb" example, but nothing happens when you enter "fb". Other snippets of this extension do work.
VSCode version 1.41.1