JavaScript Snippets installs statistics

✂️ vscode-javascript-snippets

Visual Studio Code snippets for JavaScript, TypeScript, and React

Code snippets are templates that make it easier to autocomplete repeating code patterns. They're like shortcuts for writing code.

Setup

Just install this package from the Extension Marketplace, then add "editor.snippetSuggestions": "top" to your user settings to see these snippets on top in the suggestion popover. Make sure you've also set "editor.tabCompletion": "on" for tab completion.

Snippets

These snippets are optimized to be short and easy to remember. They follow JavaScript Standard Style. They also support tab autocompletion to accelerate your workflow!

Below is a list of all available snippets and the shortcuts for each one. The ⇥ means the tab key.

JavaScript

Declarations

v⇥ var statement

v=⇥ var assignment

l⇥ let statement

l=⇥ let assignment

dl=⇥ destructuring let assignment

co⇥ const statement

co=⇥ const assignment

dco=⇥ destructuring const assignment

Flow Control

if⇥ if statement

el⇥ else statement

ife⇥ if/else statement

ei⇥ else if statement

ter⇥ ternary operator

fl⇥ for loop

rfl⇥ reverse for loop

fi⇥ for in loop

},

fo⇥ for of loop (ES6)

wl⇥ while loop

tc⇥ try/catch

tf⇥ try/finally

tcf⇥ try/catch/finally

sw⇥ switch case

Functions

f⇥ anonymous function

fn⇥ named function

iife⇥ immediately-invoked function expression (IIFE)

fa⇥ function apply

fc⇥ function call

fb⇥ function bind

af⇥ arrow function (ES6)

afb⇥ arrow function with body (ES6)

gf⇥ generator function (ES6)

gfn⇥ named generator function (ES6)

Iterables

seq⇥ sequence of 0..n

fe⇥ forEach loop

map⇥ map

reduce⇥ reduce

filter⇥ filter

find⇥ find

Objects and Classes

ol⇥ object literal

slol⇥ same-line object literal

kv⇥ key/value pair

c⇥ class (ES6)

cex⇥ child class (ES6)

ctor⇥ class constructor (ES6)

m⇥ method (ES6 syntax)

get⇥ getter (ES6 syntax)

set⇥ setter (ES6 syntax)

gs⇥ getter and setter (ES6 syntax)

pctor⇥ prototypal constructor

proto⇥ prototype method

oa⇥ Object.assign

oc⇥ Object.assign copy (shallow clone)

Returning values

r⇥ return

rp⇥ return Promise (ES6)

rc⇥ return complex value (such as JSX components)

Types

tof⇥ typeof

iof⇥ instanceof

Promises

pr⇥ Promise (ES6)

then⇥ Promise.then

catch⇥ Promise.catch

ES6 Modules

ex⇥ export (ES6)

exd⇥ export default (ES6)

im⇥ import module (ES6)

ima⇥ import module as (ES6)

Node.js

cb⇥ Node.js style callback

re⇥ require

rel⇥ require local

req⇥ require assignment

reql⇥ require assignment local

dreq⇥ destructuring require assignment

dreql⇥ destructuring require assignment local

em⇥ exports.member

me⇥ module.exports

meo⇥ module exports object

on⇥ event handler

Testing (Jest, Mocha, Jasmine, etc.)

desc⇥ describe

cont⇥ context

it⇥ test (synchronous)

ita⇥ test (asynchronous)

itc⇥ test (callback)

bf⇥ before test suite

bfe⇥ before each test

aft⇥ after test suite

afe⇥ after each test

Console

cl⇥ console.log

ce⇥ console.error

cw⇥ console.warn

cll⇥ console.log (labeled)

cel⇥ console.error (labeled)

cwl⇥ console.warn (labeled)

Timers

st⇥ setTimeout

si⇥ setInterval

sim⇥ setImmediate

nt⇥ process nextTick

Miscellaneous

us⇥ insert 'use strict' statement

React (JS)

propTypes⇥

defaultProps⇥

getDerivedStateFromProps⇥

React (TS)

defaultProps⇥

getDerivedStateFromProps⇥

Description from the VS Code Marketplace listing.