Hyper JavaScript Snippets (Visual Studio Code)

Introduction

Hyper JavaScript Snippets is a snippets collection for JavaScript and TypeScript. The snippets follow some rules to make it more friendly to intellisense, point-free-style programming etc. Prettier is highly recommanded to work with this extension.

Install from VSCode Extension Marketplace Hyper JavaScript Snippets.

Advantages

Easy Learn - related snippets shared a same namespace or pattern, like every for loop prefix start with fo, all assignment snippet share *a pattern.
Composable - No semicolon (point-free friendly), no newline, no placeholder, small snippet, the very end tabstop as possible, make composing snippets friendly.
Avoid conflict - Try to avoid snippet's prefix conflict with variable name and built-in snippet's prefix.

Suggestions

Use Prettier to help you formating your code.
Disable built-in snippets with Control Snippets or hiding with built-in command Insert Snippet.
Set "editor.snippetSuggestions": "top".
Set "editor.formatOnSave": true,.
Set "editor.suggest.snippetsPreventQuickSuggestions": false,.

Known issues

Moving cursor on snippet content break tab stop (intented), but okey on user input content 😩.
- Can not use "choice" to provide selection, affect: destrucring assignment...
There is no intenllisense / autocomplete hint when typing in active snippet (VSCode default).
- Affect: No more autocomplete hint including any snippet, object methods, or global function .
- Turn off editor.suggest.snippetsPreventQuickSuggestions help a bit.
Can not correctly generate paired bracket when there is a character right beside cursor.
- A space added before :, affect: sw, case, pd, etc.

FAQ

How to remember so many snippets prefix for new user?

Related snippets shared a same namespace, like for every for loop snippets prefix are start with fo, all assignment snippets shared *a pattern.

Declarations

Prefix	Desc	Body
`va`	var assignment	`var $1 = $0`
`la`	let assignment (ES2015)	`let $1 = $0`
`ca`	const assignment (ES2015)	`const $1 = $0`
`vad`	var destructuring assignment (ES2015)	`var ${0:dest} = $1`
`lad`	let destructuring assignment (ES2015)	`let ${0:dest} = $1`
`cad`	const destructuring assignment (ES2015)	`const ${0:dest} = $1`

Conditional

Prefix	Desc	Body
`if`	if statement	`if ($1) $0`
`el`	else statement	`else $0`
`ifel`	if/else statement	`if ($1) $2 else $0`
`elif`	else if statement	`else if ($1) $0`
`ter`	ternary operator	`$1 ? $2 : $0`
`sw`	switch case	`switch ($1) {$2}$0`
`case`	switch's case	`case $1 : $0`

Statement

Prefix	Desc	Body
`fo`	for loop	`for ($1 ; $2 ; $3) $0`
`foi`	for in loop	`for (const $1 in $2) $0`
`fof`	for of loop (ES2015)	`for (const $1 of $2) $0`
`foa`	for await of loop (ES2018)	`for await (const $1 of $2) $0`
`wh`	while loop	`while ($1) $0`
`tc`	try/catch	`try {$1} catch $2 {$0}`
`tf`	try/finally	`try {$1} finally {$0}`
`tcf`	try/catch/finally	`try {$1} catch $2 {$3} finally {$0}`

Functions

Prefix	Desc	Body
`f`	function	`function ($1) {$0}`
`f`	function (TypeScript)	`function ($1)$2 {$0}`
`fn`	named/generator function	`function $1($2) {$0}`
`fn`	named/generator function (TypeScript)	`function $1($2)$3 {$0}`
`fa`	async function	`async function ($1) {$0}`
`fa`	async function (TypeScript)	`async function ($1)$2 {$0}`
`fna`	async named/generator function	`async function $1($2) {$0}`
`fna`	async named/generator function (TypeScript)	`async function $1($2)$3 {$0}`
`af`	arrow function (ES2015)	`($1) => $0`
`afa`	async arrow function (ES2015)	`async ($1) => $0`
`ar`	arrow function with return type (ES2015, TypeScript)	`($1)$2 => $0`
`ara`	async arrow function with return type (ES2015, TypeScript)	`async ($1)$2 => $0`
`ag`	generic/generator arrow function (ES2015, TypeScript)	`$1($2)$3 => $0`
`aga`	async generic/generator arrow function (ES2015, TypeScript)	`async $1($2)$3 => $0`
`iife`	immediately-invoked function expression (IIFE)	`($2)($1)$0`
`pd`	parameter destructuring with type (TypeScript)	`${0:param} : ${1:type}`

Iterables

Prefix	Desc	Body
`seq`	sequence of 0..n	`[...Array(${1:length}).keys()]$0`

Objects

Prefix	Desc	Body
`ol`	object literal	`{ $1: $0 }`

Classes

Prefix	Desc	Body
`cs`	class (ES2015)	`class ${1:name} { $0 }`
`cse`	class extends (ES2015)	`class ${1:name} extends ${2:base} { $0 }`
`cst`	class constructor (ES2015)	`constructor($1) {$0}`
`csm`	method (ES2015)	`${1:name}($2) {$0}`
`csma`	async method (ES2015)	`async ${1:name}($2) {$0}`
`gter`	getter (ES2015)	`get ${1:property}() {$0}`
`ster`	setter (ES2015)	`set ${1:property}(${2:value}) {$0}`
`gs`	getter and setter (ES2015)	`get ${1:property}() {$0} set ${1:property}(${2:value}) {}`

Types

Prefix	Desc	Body
`tof`	typeof	`typeof ${1:source} === $0`
`iof`	instanceof	`${1:source} instanceof ${0:Class}`

Promises

Prefix	Desc	Body
`pr`	Promise (ES2015)	`new Promise($0)`
`prs`	Promise resolve (ES2015)	`Promise.resolve($1)$0`
`prj`	Promise reject (ES2015)	`Promise.reject($1)$0`
`pra`	Promise all (ES2015)	`Promise.all($1)$0`
`pras`	Promise all settled (ES2020)	`Promise.allSettled($1)$0`
`prn`	Promise any (ES2021)	`Promise.any($1)$0`
`prt`	Promise type (TypeScript)	`Promise<$0>`

ES2015 Modules

Prefix	Desc	Body
`ex`	export (ES2015)	`export $0`
`exd`	export default (ES2015)	`export default $0`
`exas`	export as (ES2015)	`export { $1 as $2 };$0`
`exf`	export from (ES2015)	`export ${2:name} from '$1';$0`
`exaf`	export all from (ES2015)	`export *$2 from '$1';$0`
`im`	import (ES2015)	`import$0`
`imm`	import.meta (ES2015)	`import.meta$0`
`immu`	import.meta.url (ES2015)	`import.meta.url$0`
`imp`	import module (ES2015)	`import ${2:name} from '$1'$3;$0`
`imd`	import module dynamically (ES2020)	`import($1)$0`
`imf`	import file (ES2015)	`import '$1';$0`
`imas`	import module as (ES2015)	`import ${2:*} as ${3:name} from '$1';$0`

Node.js

Prefix	Desc	Body
`cb`	Node.js style callback	`(err, ${1:response}) => {$0}`
`re`	require	`require(${1:path})$0`
`req`	require assignment	`const ${2:name} = require('$1');$0`
`em`	exports.member	`exports.$1 = $2;$0`
`me`	module.exports	`module.exports = $1$0`
`on`	event handler	`on('${1:event}', ${2:callback});$0`

Console

Prefix	Desc	Body
`cl`	console.log	`console.log($1)$0`
`cla`	console.assert	`console.assert($1)$0`
`clcl`	console.clear	`console.clear($1)$0`
`clc`	console.count	`console.count($1)$0`
`clcr`	console.countReset	`console.countReset($1)$0`
`cld`	console.debug	`console.debug($1)$0`
`cldi`	console.dir	`console.dir($1)$0`
`cldx`	console.dirxml	`console.dirxml($1)$0`
`cle`	console.error	`console.error($1)$0`
`clg`	console.group	`console.group($1) $0 console.groupEnd($1)`
`clgc`	console.groupCollapsed	`console.groupCollapsed($1) $0 console.groupEnd($1)`
`cli`	console.info	`console.info($1)$0`
`cltb`	console.table	`console.table($1)$0`
`clt`	console.time	`console.time('$1') $0 console.timeEnd('$1')`
`cltl`	console.timeLog	`console.timeLog($1)$0`
`cltr`	console.trace	`console.trace($1)$0`
`clw`	console.warn	`console.warn($1)$0`

Timers

Prefix	Desc	Body
`sett`	setTimeout	`setTimeout(${2:callback}, ${1:delay})$0`
`setin`	setInterval	`setInterval(${2:callback}, ${1:delay})$0`
`setim`	setImmediate (node.js)	`setImmediate(${1:callback}$2)$0`
`nt`	process nextTick (node.js)	`process.nextTick($1);$0`

Comment

Prefix	Desc	Body
`jdc`	JSDoc comment	`/** $1 */$0`
`jdt`	JSDoc type	`@type {$1}$0`
`jdtd`	JSDoc type define	`@typedef {$1} $0`

Miscellaneous

Prefix	Desc	Body
`us`	insert 'use strict' statement	`'use strict';`

TypeScript (Data Types)

Prefix	Desc	Body
`typ`	type (TypeScript)	`type ${1:name} = $0`
`int`	interface (TypeScript)	`interface ${1:name} {$2}$0`
`enu`	enum (TypeScript)	`enum ${1:name} {$2}$0`
`enc`	const enum (TypeScript)	`const enum ${1:name} {$2}$0`
`mod`	module (TypeScript)	`module ${1:name} {$2}$0`
`nam`	namespace (TypeScript)	`namespace ${1:name} {$2}$0`

Only in typescript and typescriptreact file type.

Hyper JavaScript Snippets

t7yang