matijaoe/modern-javascript-snippetsPublic

NotificationsYou must be signed in to change notification settings
Fork0
Star4

⚡ Short and effective JavaScript & TypeScript snippets for the modern-day developer

marketplace.visualstudio.com/items?itemName=matijao.modern-js-snippets

License

MIT license

4 stars 0 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 56 Commits
.vscode		.vscode
assets		assets
src		src
.gitattributes		.gitattributes
.gitignore		.gitignore
.vscodeignore		.vscodeignore
CHANGELOG.md		CHANGELOG.md
LICENSE.md		LICENSE.md
README.md		README.md
deno.json		deno.json
package.json		package.json
vsc-extension-quickstart.md		vsc-extension-quickstart.md

Repository files navigation

Modern JavaScript Snippets ⚡

Short and effective JavaScript & TypeScript snippets for the modern-day developer.

Features

Over200 carefully crafted snippets
Modern JavaScript syntax
Modern JavaScript APIs (Intl, URL, Navigator...)
Strategically placed tabstops
Prefixes created with exact-match in mind
Auto-generated documentation

Support

Only JavaScript and TypeScript will be supported. Specific frameworks get their own extensions. No bloat.

Setup

The following is not mandatory, but could provide a nicer experience. Test them out and decide what works best for you.

Look for it in user settings, or edit the settings.json directly:

"editor.formatOnSave":true,// Tab complete snippets when their prefix match. Works best when 'quickSuggestions' aren't enabled."editor.tabCompletion":"onlySnippets"

Style

Most of the code snippets are without semicolons (;), except for where itallows for better tabstop management. Strings use single quotes (').

It's highly recommended to use these snippets along with Prettier/ESLint to haveyour code automatically formatted to your preference.

Snippet syntax

Tabstops

$1,$2,$3 specify cursor locations, in order in which tabstops will bevisited
$0 denotes the final cursor position
Multiple occurrences of the same tabstop are linked and updated in sync

Placeholders

Tabstops with default values →${1:name}

Choices

Tabstops with multiple values →${1|one,two,three|}.
Truncated in documentation, for easier viewing →${1|one,...|}.

Snippets

Assignments

Prefix	Name	Body
`ca`	const assignment	const${1:name}=$2
`la`	let assignment	let${1:name}=$2
`cas`	const string assignment	const${1:name}='$2'
`las`	let string assignment	let${1:name}='$2'
`caa`	const array assignment	const${1:arr}=[$0]
`cao`	const object assignment	const${1:obj}={ $0}
`dob`	object destructuring	const{ $2}=${1:obj}$0
`dar`	array destructuring	const[$2]=${1:arr}$0

Functions

Prefix	Name	Body
`fn`	function	function${1:fn}($2){$0}
`fna`	async function	asyncfunction${1:fn}($2){$0}
`nfn`	named arrow function	const${1:fn}=($2)=>{$0}
`nfna`	async named arrow function	const${1:fn}=async($2)=>{$0}
`af`	arrow function	($1)=>$0
`arr`	arrow function arrow	=>$0
`afa`	async arrow function	async($1)=>$0
`afb`	arrow function with body	($1)=>{$0}
`afba`	async arrow function with body	async($1)=>{$0}
`iife`	immediately-invoked function expression	(($1)=>{$0})($2)

Flow control

Prefix	Name	Body
`iff`	if statement	if(${1:true}){$2}
`ifel`	if/else statement	if(${1:true}){$2}else{$3}
`ifei`	if/else-if statement	if(${1:true}){$2}elseif($3){$4}
`el`	else statement	else{$0}
`ei`	else if statement	elseif($1){$2}
`ter`	ternary operator	$1 ?$2 :$3
`tera`	ternary expression assignment	const${1:name}=$2 ?$3 :$4
`sw`	switch	switch($1){case$2 :$3default:$0}
`scase`	switch case	case$1 :$2
`tc`	try/catch	try{$1}catch(err){$0}
`tcf`	try/catch/finally	try{$1}catch(err){$2}finally{$3}
`tf`	try/finally	try{$1}finally{$2}

Loops

Prefix	Name	Body
`flr`	for loop (range)	for(let${1:i}=0;${1:i}<${2:5};${1:i}++){$0}
`rfl`	reverse for loop	for(let${1:i}=${2:iter}.length-1;${1:i}>=0;${1:i}--){$0}
`fin`	for...in loop	for(let${1:key}in${2:array}){$0}
`fof`	for...of loop	for(let${1:item}of${2:items}){$0}
`fofa`	for await...of loop	forawait(let${1:item}of${2:items}){$0}
`wl`	while loop	while(${1:true}){$0}
`dwl`	do while loop	do{$0}while($1)

Classes

Prefix	Name	Body
`cs`	class	class$1{$0}
`cse`	class extends	class$1extends${2:Base}{$0}
`csp`	class proprety	${1:name}=${2:value}
`csc`	class with constructor	class$1{constructor($2){$0}}
`csec`	class extends with constructor	class$1extends${2:Base}{constructor($3){$0}}
`cst`	class constructor	constructor($1){$0}
`get`	getter	get${1:property}(){$0}
`set`	setter	set${1:property}(${2:value}){$0}
`gs`	getter and setter	get${1:property}(){$0}set${1:property}(${2:value}){$0}
`met`	method	${1:name}($2){$0}
`meta`	async method	async${1:name}($2){$0}

Array methods

Prefix	Name	Body
`aat`	array.at	$1.at(${2:0})
`fe`	Array.forEach()	$1.forEach((${2:item})=>{$0})
`map`	Array.map()	$1.map((${2:item})=>${3})
`fmap`	Array.flatMap()	$1.flatMap((${2:item})=>${3})
`reduce`	Array.reduce()	$1.reduce((${2:acc},${3:curr})=>{$0},${4:initial})
`reduceRight`	Array.reduceRight()	$1.reduceRight((${2:acc},${3:curr})=>{$0},${4:initial})
`filter`	Array.filter()	$1.filter((${2:item})=>${3})
`find`	Array.find()	$1.find((${2:item})=>${3})
`findl`	Array.findLast()	$1.findLast((${2:item})=>${3})
`findi`	Array.findIndex()	$1.findIndex((${2:item})=>${3})
`findli`	Array.findLastIndex()	$1.findLastIndex((${2:item})=>${3})
`every`	Array.every()	$1.every((${2:item})=>${3})
`some`	Array.some()	$1.some((${2:item})=>${3})
`reverse`	Array.reverse()	$1.reverse()
`sort`	Array.sort(	$1.sort((${2:a},${3:b})=>$4)
`group`	Array.group()	$1.group((${2:item})=>$3)
`groupMap`	Array.groupToMap()	$1.groupToMap((${2:item})=>$3)
`mapStr`	Array.map() to string	$1.map(String)
`mapNum`	Array.map() to number	$1.map(Number)
`mapBool`	Array.map() to boolean	$1.map(Boolean)
`filterTruthy`	Array.filter() truthy	$1.filter(Boolean)
`arfr`	Array.from	Array.from($1)

Modules

Prefix	Name	Body
`im`	import from module	import{$2}from'${1:module}'
`imd`	import default	import${2:thing}from'${1:module}'
`ima`	import as	import${2:*}as ${3:name}from'${1:module}'
`imf`	import file	import'$1'
`imp`	import dynamic	import('$0')
`impa`	await import dynamic	awaitimport('$0')
`imm`	import meta	import.meta.$0
`ex`	export	export$0
`exd`	export default	exportdefault$0
`exf`	export from	export{$0}from'${1:module}'
`exa`	export all from	export*from'${1:module}'
`exo`	export object	exportconst${1:name}={ $0}
`efn`	export function	exportfunction${1:name}($2){$0}
`edfn`	export default function	exportdefaultfunction${1:name}($2){ $0}
`enfn`	export named arrow function	exportconst${1:name}=($2)=>{$0}

Promises

Prefix	Name	Body
`fet`	fetch	awaitfetch($1).then(res=>res.json())
`feta`	fetch assignment	const${1\|data,...\|}=awaitfetch($2).then(res=>res.json())
`npr`	promise	newPromise((resolve,reject)=>{$0})
`prr`	Promise.resolve	Promise.resolve($1)
`prj`	Promise.reject	Promise.reject($1)
`then`	promise then()	$1.then((${2:value})=>$0)
`catc`	promise catch()	$1.catch((${2:err})=>$0)
`thenc`	promise then().catch()	$1.then((${2:value})=>$3).catch((${4:err})=>$5)
`pra`	Promise.all	Promise.all($1)
`pras`	Promise.allSettled	Promise.allSettled($1)
`pran`	Promise.any	Promise.any($1)

Literals, operators, expressions

Grouping them all together for now

Prefix	Name	Body
`arr`	array literal	[$0]
`ob`	object literal	{}
`tl`	template literal	`$0`
`tle`	template literal operation	${${1:name}}$0
`ns`	new Set	newSet($1)
`nm`	new Map	newMap($1)
`am`	array merge	[...$1]
`om`	object merge	{ ...$1}
`or`	OR (\|\|)	\|\|$0
`and`	AND (&&)	&&$0
`lt`	less than (<)	<$0
`lte`	less than or equal to (<=)	<=$0
`gt`	greater than (>)	>$0
`gte`	greater than or equal to (>=)	>=$0
`nc`	nullish coalescing (??)	??$0
`neq`	strict non-equality (===)	!==$0
`eq`	strict equality (===)	===$0
`ora`	logical OR assignment (\|\|=)	\|\|=$0
`nca`	nullish coalescing assignment (??=)	??=$0
`plus`	addition	+$0
`minus`	subtraction	-$0
`mul`	multiplication	*$0
`div`	division	/$0
`mod`	modulo	%$0
`inc`	addition assignment	+= ${0:1}
`sub`	subtraction assignment	-= ${0:1}
`mula`	multiplication assignment	*= ${0:1}
`diva`	division assignment	/=${0:1}
`col`	colon	:

Objects

Prefix	Name	Body
`oe`	Object.entries	Object.entries($0)
`ofe`	Object.fromEntries	Object.fromEntries($0)
`ok`	Object.keys	Object.keys($0)
`ov`	Object.values	Object.values($0)

Utilities

Prefix	Name	Body
`pi`	parse int	parseInt($1,${2\|10,...\|})
`pf`	parse float	parseFloat($1)
`uniq`	array of unique values	[...newSet($0)]
`seq`	sequence of 0..n	[...Array(${1:length}).keys()]
`cp`	copy to clipboard	navigator.clipboard.writeText($1)
`nurl`	new URL	newURL($1)
`sp`	url search params	newURLSearchParams($1)
`spa`	url search params assignment	const${1:params}=newURLSearchParams($2)
`spg`	get search param	${1:params}.get($2)
`sps`	set search param	${1:params}.set($2,$3)

Returns and exceptions

Prefix	Name	Body
`ret`	return	return$0
`reo`	return object	return{ $0}
`rei`	return object inline	return({$0})
`terr`	throw error	thrownew${1\|Error,...\|}($0)

Timers

Prefix	Name	Body
`si`	set interval	setInterval(()=>{$0},${1:1000})
`st`	set timeout	setTimeout(()=>{$0},${1:1000})
`sim`	set immediate	setImmediate(()=>{$0})
`prnt`	process next tick	process.nextTick(()=>{$0})

JSON

Prefix	Name	Body
`jsp`	JSON parse	JSON.parse(${1:json})
`jss`	JSON stringify	JSON.stringify(${1:value})
`jssf`	JSON stringify (formatted)	JSON.stringify(${1:value},null,2)

Console

Prefix	Name	Body
`cl`	console.log	console.log($0)
`ci`	console.info	console.info($1)
`cdi`	console.dir	console.dir($1)
`ce`	console.error	console.error($1)
`cw`	console.warn	console.warn($1)
`ct`	console.time	console.time('$1')$0console.timeEnd('$1')
`ctb`	console.table	console.table($1)
`clr`	console.clear	console.clear()
`clm`	console.log message	console.log('$0')
`clo`	console.log object	console.log({ $0})
`clc`	console.log clipboard	console.log({ $CLIPBOARD})
`cll`	console.log (labeled)	console.log('$1 :',$1$2)
`cil`	console.info (labeled)	console.info('$1 :',$1$2)
`cel`	console.error (labeled)	console.error('$1 :',$1$2)
`cwl`	console.warn (labeled)	console.warn('$1 :',${2:$1})

Dates

Prefix	Name	Body
`nd`	new Date()	newDate($1)
`nds`	new Date() with date string	newDate('${1:2023}-${2:\|01,...\|}-${3:31}')
`now`	Date.now()	Date.now()
`tls`	Date.toLocaleString()	$1.toLocaleString('${2\|en-US,...\|}'$3)

DOM

Prefix	Name	Body
`qs`	query selector	${1:document}.querySelector('$2')
`qsa`	query selector all	${1:document}.querySelectorAll('$2')
`qsaa`	query selector all as array	[...${1:document}.querySelectorAll('$2')]
`ael`	event listener	${1:document}.addEventListener('${2:click}',(e$3)=>$0)
`qsae`	query selector with event listener	${1:document}.querySelector('$2')?.addEventListener('${3:click}',(e$4)=>$0)
`gid`	get element by id	${1:document}.getElementById('$2')

Node

Prefix	Name	Body
`req`	require	require('${1:module}')
`rqr`	require assignment	const$1=require('${1:module}')
`mex`	module.exports	module.exports={$1}

Intl

Internationalization API

Prefix	Name	Body
`inf`	Intl.NumberFormat	newIntl.NumberFormat('${1\|en-US,...\|}'$3).format($2)
`infs`	Intl.NumberFormat style	newIntl.NumberFormat('${1\|en-US,...\|}',{style:'${3\|decimal,...\|}',$4}).format($2)
`infc`	Intl.NumberFormat as currency	newIntl.NumberFormat('${1\|en-US,...\|}',{style:'currency',currency:'${3\|USD,...\|}',$4}).format($2)
`infp`	Intl.NumberFormat as percentage	newIntl.NumberFormat('${1\|en-US,...\|}',{style:'percent',$3}).format($2)
`infu`	Intl.NumberFormat as unit	newIntl.NumberFormat('${1\|en-US,...\|}',{style:'unit',unit:'${3\|acceleration-g-force,...\|}',unitDisplay:'${4\|long,...\|}',$0}).format($2)
`idtf`	Intl.DateTimeFormat	newIntl.DateTimeFormat('${1\|en-US,...\|}'$3).format($2)
`idtfs`	Intl.DateTimeFormat with style	newIntl.DateTimeFormat('${1\|en-US,...\|}',{dateStyle:'$3',$0}).format($2)

Types

Prefix	Name	Body
`aia`	is array	Array.isArray($0)
`tof`	typeof	typeof$1
`tofc`	typeof check	typeof$1==='${2\|undefined,...\|}'
`iof`	instanceof	$1instanceof${0:Class}
`isnil`	is nil	$1==null
`nnil`	is not nil	$1!=null
`isnan`	is NaN	isNaN($0)
`nnan`	is not NaN	!isNaN($0)

Testing

Prefix	Name	Body
`desc`	describe	describe('$1',()=>{$0})
`cont`	context	context('$1',()=>{$0})
`it`	test (synchronous)	it('$1',()=>{$0})
`ita`	test (asynchronous)	it('$1',async()=>{$0})
`itc`	test (callback)	it('$1',(done)=>{$0done()})
`bf`	before test suite	before(()=>{$0})
`bfe`	before each test	beforeEach(()=>{$0})
`aft`	after test suite	after(()=>{$0})
`afe`	after each test	afterEach(()=>{$0})

Globals

Prefix	Name	Body
`wlo`	window.location	window.location
`wlh`	window.location.href	window.location.href

Misc

Prefix	Name	Body
`us`	'use strict' statement	'use strict'
`prs`	process.server	process.server
`prc`	process.client	process.client
`env`	env variable	process.env.$0
`envv`	env variable (meta)	import.meta.env.$0

TypeScript

Available only where TypeScript is supported

Declarations

Prefix	Name	Body
`cat`	const assignment (typed)	const${1:name}: ${2:string}=$3
`lat`	let assignment (typed)	let${1:name}: ${2:string}=$3
`caat`	array assignment (typed)	const${1:arr}: ${2:string}[]=[$0]
`caot`	object assignment (typed)	const${1:obj}: ${2:object}={$0}

Types

Prefix	Name	Body
`int`	interface	interface${1:Model}{$0}
`inte`	interface extends	interface${1:Model}extends${2:Base}{$0}
`tp`	type	type${1:Model}=$2
`tpu`	type union	type${1:Model}=${2:string}\|${3:number}
`tpi`	type intersection	type${1:Model}=$2&$3

DOM

Prefix	Name	Body
`qst`	query selector (typed)	${1:document}.querySelector<${2\|HTMLElement,...\|}>('$3')
`qsat`	query selector all (typed)	${1:document}.querySelectorAll<${2\|HTMLElement,...\|}>('$3')
`qsaat`	query selector all as array (typed)	[...${1:document}.querySelectorAll<${2\|HTMLElement,...\|}>('$3')]
`gidt`	get element by id (typed)	${1:document}.getElementById<${2\|HTMLElement,...\|}>('$3')

Running locally

# ensure Deno is installed# https://deno.land/manual@v1.29.1/getting_started/installation# generate .code-snippets and documentationnpm run generate

About

⚡ Short and effective JavaScript & TypeScript snippets for the modern-day developer

marketplace.visualstudio.com/items?itemName=matijao.modern-js-snippets

Releases7

v0.7.2 Latest

Nov 12, 2023

+ 6 releases

Languages

TypeScript100.0%

Movatterモバイル変換

License

matijaoe/modern-javascript-snippets

Folders and files

Latest commit

History

Repository files navigation

Modern JavaScript Snippets ⚡

Features

Support

Setup

Style

Snippet syntax

Tabstops

Placeholders

Choices

Snippets

Assignments

Functions

Flow control

Loops

Classes

Array methods

Modules

Promises

Literals, operators, expressions

Objects

Utilities

Returns and exceptions

Timers

JSON

Console

Dates

DOM

Node

Intl

Types

Testing

Globals

Misc

TypeScript

Declarations

Types

DOM

Running locally

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases7

Uh oh!

Languages