JavaScript standardjs styled snippets installs statistics

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

va⇥ var assignment

l⇥ let statement

la⇥ let assignment awaited

ly⇥ let yielded assignment

c⇥ const statement

cd⇥ const from destructuring

ca⇥ const assignment awaited

cd⇥ const from destructuring awaited

cf⇥ const arrow function assignment

cy⇥ const yielded assignment

Flow Control

i⇥ if statement

te⇥ ternary statement

ta⇥ ternary assignment

el⇥ else statement

ife⇥ else statement

ei⇥ else if statement

fl⇥ for loop (ES6)

fi⇥ for in loop (ES6)

fo⇥ for of loop (ES6)

wl⇥ while loop

wid⇥ while iteration decrementing

tc⇥ try/catch

tf⇥ try/finally

tcf⇥ try/catch/finally

Functions

fan⇥ anonymous function

fn⇥ named function

asf⇥ async function

aa⇥ async arrow function with

iife⇥ immediately-invoked function expression (IIFE)

aiife⇥ async immediately-invoked function expression

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

af⇥ arrow function (ES6)

afi⇥ arrow function identity

fd⇥ arrow function with destructuring

fdr⇥ arrow function with destructuring returning destructured

f⇥ arrow function with body (ES6)

fr⇥ arrow function with return (ES6)

fro⇥ arrow function with single returned object

gf⇥ generator function (ES6)

gfn⇥ named generator function (ES6)

Iterables

fe⇥ forEach loop

map⇥ map function

mapsd⇥ map single desctructured argument

reduce⇥ reduce function

filter⇥ filter function

find⇥ ES6 find function

every⇥ every function

some⇥ some function

Objects and classes

cs⇥ class (ES6)

csx⇥ extend a class (ES6)

m⇥ method (ES6 syntax)

get⇥ getter (ES6 syntax)

set⇥ setter (ES6 syntax)

gs⇥ getter and setter (ES6 syntax)

proto⇥ prototype method

ok Object.keys

ov Object.values

oe Object.entries

oc Object.create

oa Object.assign

og Object.getOwnPropertyDescriptor

od Object.defineProperty

Returning values

r⇥ return

rt⇥ return this

rn⇥ return null

rf⇥ return arrow function

ro⇥ return new object

ra⇥ return new array

rp⇥ return Promise (ES6)

tof⇥ typeof comparison

tf⇥ this

iof⇥ instanceof comparison

ia⇥ isArray

Promises

pa⇥ Promise.all

p⇥ new Promise (ES6)

pt⇥ Promise.then

pc⇥ Promise.catch

ES6 modules

e⇥ module export

ed⇥ module default export

edf⇥ module default export function

ec⇥ module export const

ef⇥ module export const

im⇥ module import

ia⇥ module import as

id⇥ module import destructuring

BDD testing (Mocha, Jasmine, etc.)

desc⇥ describe

dt describe top level

it⇥ asynchronous "it"

itd⇥ "it" with callback

its⇥ "it" synchronous

bf⇥ before test suite

bfe⇥ before each test

aft⇥ after test suite

afe⇥ after each test

Timers

st⇥ setTimeout

si⇥ setInterval

sim⇥ setImmediate

DOM

ae⇥ addEventListener

rel⇥ removeEventListener

evc dom event cancel default and propagation

gi⇥ getElementById

gc⇥ getElementsByClassName

gt⇥ getElementsByTagName

qs⇥ querySelector

qsa⇥ querySelectorAll

cdf⇥ createDocumentFragment

cel⇥ createElement

heac⇥ appendChild

herc⇥ removeChild

hecla⇥ classList.add

hect⇥ classList.toggle

heclr⇥ classList.remove

hega⇥ getAttribute

hesa⇥ setAttribute

hera⇥ removeAttribute

Node.js

cb⇥ Node.js style callback

rq⇥ require a module

cr⇥ require and assign a module

em⇥ export member

me⇥ module.exports

on⇥ attach an event handler

Miscellaneous

uss⇥ use strict

js⇥ JSON Stringify

jp⇥ JSON Parse

a⇥ await

apa⇥ Promise.all

apm⇥ Promise.all map

ast⇥ Promise sleep

Console

cl⇥ console.log

cv⇥ console.log

ce⇥ console.error

cw⇥ console.warn

cod⇥ console.dir

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

Description from the VS Code Marketplace listing.