JavaScript

VS Code JavaScript (ES6) snippets

This extension provides a collection of ES6-style code snippets for JavaScript, usable in the VS Code editor (works with both JavaScript and TypeScript).

Note

All snippets include the trailing semicolon ;. If you prefer snippets without semicolons, there’s a fork by @jmsv available here.

Installation

Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P), type Extensions, then search for JavaScript (ES6) code snippets and install it. You can also view installed snippets from the Extensions view.

Supported file types

JavaScript (.js)
TypeScript (.ts)
JavaScript React (.jsx)
TypeScript React (.tsx)
HTML (.html)
Vue (.vue)

Snippets

Below are the available snippets and their triggers. ⇥ denotes the TAB key.

Import and export

Trigger	Content
`imp→`	import entire module — `import fs from 'fs';`
`imn→`	import module for side effects — `import 'animate.css'`
`imd→`	import named members — `import { rename } from 'fs';`
`ime→`	import everything as alias — `import * as localAlias from 'fs';`
`ima→`	import named member as alias — `import { rename as localRename } from 'fs';`
`rqr→`	require package — `require('');`
`req→`	require into const — `const packageName = require('packageName');`
`mde→`	module.exports default — `module.exports = {};`
`env→`	export named variable — `export const nameVariable = localVariable;`
`enf→`	export named function — `export const log = (parameter) => { console.log(parameter); };`
`edf→`	export default function — `export default function fileName(parameter) { console.log(parameter); };`
`ecl→`	export default class — `export default class Calculator { };`
`ece→`	export default class extending another — `export default class Calculator extends BaseClass { };`

Class helpers

Trigger	Content
`con→`	default constructor — `constructor() {}`
`met→`	class method — `add() {}`
`pge→`	getter — `get propertyName() { return value; }`
`pse→`	setter — `set propertyName(value) { }`

Common constructs

Trigger	Content
`fre→`	forEach — `array.forEach(currentItem => {})`
`fof→`	for...of — `for (const item of object) { }`
`fin→`	for...in — `for (const item in object) { }`
`anfn→`	anonymous arrow function — `(params) => {}`
`nfn→`	named arrow function — `const add = (params) => {}`
`dob→`	object destructuring — `const { rename } = fs`
`dar→`	array destructuring — `const [first, second] = [1, 2]`
`sti→`	setInterval helper — `setInterval(() => {});`
`sto→`	setTimeout helper — `setTimeout(() => {});`
`prom→`	new Promise — `return new Promise((resolve, reject) => {});`
`thenc→`	promise then/catch — `.then((res) => {}).catch((err) => {});`

Console helpers

Trigger	Content
`cas→`	console.assert — `console.assert(expression, object)`
`ccl→`	console.clear — `console.clear()`
`cco→`	console.count — `console.count(label)`
`cdb→`	console.debug — `console.debug(object)`
`cdi→`	console.dir — `console.dir(object)`
`cer→`	console.error — `console.error(object)`
`cgr→`	console.group — `console.group(label)`
`cge→`	console.groupEnd — `console.groupEnd()`
`clg→`	console.log — `console.log(object)`
`clo→`	labeled log — `console.log('object :>> ', object);`
`ctr→`	console.trace — `console.trace(object)`
`cwa→`	console.warn — `console.warn(object)`
`cin→`	console.info — `console.info(object)`
`clt→`	console.table — `console.table(object)`
`cti→`	console.time — `console.time(label)`
`cte→`	console.timeEnd — `console.timeEnd(label)`

JavaScript Snippets Plus

env