33 🚧 Work in progress
44
55
6-
76> Short and memorable JavaScript & TypeScript snippets for the modern-day developer.
87
98<br >
@@ -90,19 +89,19 @@ You can use these snippets along with Prettier/ESLint to have your code automati
9089
9190### Promises
9291
93- | Prefix | Description | Body |
94- | ------- | ------------------ | ----------------------------------------------------------------------- |
95- | ` fet ` | native fetch | ` fetch('$1').then(res => res.json()) ` |
92+ | Prefix | Description | Body |
93+ | ------- | ------------------ | ------------------------------------------------------------------------- |
94+ | ` fet ` | native fetch | ` fetch('$1').then(res => res.json()) ` |
9695| ` feta ` | fetch assignment | ` const ${2\|data,{ data }\|} = await fetch('$1').then(res => res.json()) ` |
97- | ` pr ` | promise | ` new Promise((resolve, reject) => { $0 }) ` |
98- | ` prs ` | promise resolve | ` Promise.resolve($1)$0 ` |
99- | ` prj ` | promise reject | ` Promise.reject($1)$0 ` |
100- | ` then ` | promise.then | ` $1.then((${2:value}) => $0 ` |
101- | ` catch ` | promise.catch | ` $1.catch((${2:err}) => $0 ` |
102- | ` thenc ` | promise.then.catch | ` $1.then((${2:value}) => $3.catch((${4:err}) => $5 ` |
103- | ` pra ` | promise.all | ` Promise.all($1)$0 ` |
104- | ` prsa ` | promise.allSettled | ` Promise.allSettled($1)$0 ` |
105- | ` pran ` | promise.any | ` Promise.any($1)$0 ` |
96+ | ` pr ` | promise | ` new Promise((resolve, reject) => { $0 }) ` |
97+ | ` prs ` | promise resolve | ` Promise.resolve($1)$0 ` |
98+ | ` prj ` | promise reject | ` Promise.reject($1)$0 ` |
99+ | ` then ` | promise.then | ` $1.then((${2:value}) => $0 ` |
100+ | ` catch ` | promise.catch | ` $1.catch((${2:err}) => $0 ` |
101+ | ` thenc ` | promise.then.catch | ` $1.then((${2:value}) => $3.catch((${4:err}) => $5 ` |
102+ | ` pra ` | promise.all | ` Promise.all($1)$0 ` |
103+ | ` prsa ` | promise.allSettled | ` Promise.allSettled($1)$0 ` |
104+ | ` pran ` | promise.any | ` Promise.any($1)$0 ` |
106105
107106
108107### Modules
@@ -123,22 +122,23 @@ You can use these snippets along with Prettier/ESLint to have your code automati
123122
124123
125124### Array methods
126- | Prefix | Description | Body |
127- | -------------- | -------------------------------- | ---------------------------------------------------------------- |
128- | ` fe ` | Array.forEach() | ` $1.forEach((${2:item}) => { $0 }) ` |
129- | ` map ` | Array.map() | ` $1.map((${2:item}) => ${3})$0 ` |
130- | ` reduce ` | Array.reduce() | ` $1.reduce((${2:acc}, ${3:curr}) => { $0 }, ${4:initial}) ` |
131- | ` reduce-right ` | Array.reduceRight() | ` $1.reduceRight((${2:acc}, ${3:curr}) => { $0 }, ${4:initial}) ` |
132- | ` filter ` | Array.filter() | ` $1.filter((${2:item}) => ${3})$0 ` |
133- | ` find ` | Array.find() | ` $1.find((${2:item}) => ${3})$0 ` |
134- | ` every ` | Array.every() | ` $1.every((${2:item}) => ${3})$0 ` |
135- | ` some ` | Array.some() | ` $1.some((${2:item}) => ${3})$0 ` |
136- | ` reverse ` | Array.reverse() | ` $1.reverse()$0 ` |
137- | ` map-string ` | Array.map() as string | ` $1.map(String)$0 ` |
138- | ` map-number ` | Array.map() as number | ` $1.map(Number)$0 ` |
139- | ` filter-true ` | Array.filter() for truthy values | ` $1.filter(Boolean)$0 ` |
140-
141- ## Obkects
125+
126+ | Prefix | Description | Body |
127+ | -------------- | -------------------------------- | --------------------------------------------------------------- |
128+ | ` fe ` | Array.forEach() | ` $1.forEach((${2:item}) => { $0 }) ` |
129+ | ` map ` | Array.map() | ` $1.map((${2:item}) => ${3})$0 ` |
130+ | ` reduce ` | Array.reduce() | ` $1.reduce((${2:acc}, ${3:curr}) => { $0 }, ${4:initial}) ` |
131+ | ` reduce-right ` | Array.reduceRight() | ` $1.reduceRight((${2:acc}, ${3:curr}) => { $0 }, ${4:initial}) ` |
132+ | ` filter ` | Array.filter() | ` $1.filter((${2:item}) => ${3})$0 ` |
133+ | ` find ` | Array.find() | ` $1.find((${2:item}) => ${3})$0 ` |
134+ | ` every ` | Array.every() | ` $1.every((${2:item}) => ${3})$0 ` |
135+ | ` some ` | Array.some() | ` $1.some((${2:item}) => ${3})$0 ` |
136+ | ` reverse ` | Array.reverse() | ` $1.reverse()$0 ` |
137+ | ` map-string ` | Array.map() as string | ` $1.map(String)$0 ` |
138+ | ` map-number ` | Array.map() as number | ` $1.map(Number)$0 ` |
139+ | ` filter-true ` | Array.filter() for truthy values | ` $1.filter(Boolean)$0 ` |
140+
141+ ## Objects
142142
143143| Prefix | Description | Body |
144144| ------ | ------------------ | ------------------------ |
@@ -149,38 +149,40 @@ You can use these snippets along with Prettier/ESLint to have your code automati
149149
150150### Returns
151151
152- | Prefix | Description | Body |
153- | ------ | -------------------- | ---------------- |
154- | ` re ` | return | ` return $0 ` |
155- | ` reo ` | return object | ` return { $0 } ` |
156- | ` rei ` | return object inline | ` return ({$0}) ` |
152+ | Prefix | Description | Body |
153+ | ------ | -------------------- | --------------- |
154+ | ` re ` | return | ` return $0 ` |
155+ | ` reo ` | return object | ` return { $0 } ` |
156+ | ` rei ` | return object inline | ` return ({$0}) ` |
157157
158158
159159### Operators, expressions, literals
160160* will be better categorized*
161161
162- | Prefix | Description | Body |
163- | ------ | ----------------------------------- | ---------------------------- |
164- | ` or ` | OR (\|\| ) | ` \|\| $0 ` |
165- | ` and ` | AND (&&) | ` && $0 ` |
166- | ` nc ` | Nullish coalescing (??) | ` ?? $0 ` |
167- | ` eq ` | strict equality (===) | ` === $0 ` |
162+ | Prefix | Description | Body |
163+ | ------ | ----------------------------------- | ------------------------------ |
164+ | ` or ` | OR (\|\| ) | ` \|\| $0 ` |
165+ | ` and ` | AND (&&) | ` && $0 ` |
166+ | ` nc ` | Nullish coalescing (??) | ` ?? $0 ` |
167+ | ` eq ` | strict equality (===) | ` === $0 ` |
168168| ` ore ` | logical OR expression | ` ${1:value} \|\| ${0:value} ` |
169- | ` ande ` | logical AND expression | ` ${1:value} && ${0:value} ` |
170- | ` nce ` | Nullish coalescing expression (??) | ` ${1:item} ?? ${0:default} ` |
171- | ` eqe ` | strict equality expression | ` ${1:value} === ${2:value} ` |
172- | ` ora ` | Logical OR assignment (\|\| =) | ` ${1:name} \|\|= ${0:default} ` |
173- | ` nca ` | Nullish coalescing assignment (??=) | ` ${1:name} ??= ${0:default} ` |
174- | ` inc ` | addition assignment | ` $1 += ${0:1} ` |
175- | ` sub ` | subtraction assignment | ` $1 -= ${0:1} ` |
176- | ` mul ` | multiplication assignment | ` $1 *= ${0:1} ` |
177- | ` div ` | division assignment | ` $1 /= ${0:1} ` |
178- | ` ol ` | object literal | ` { $1: $0 } ` |
179- | ` al ` | array literal | ` [$0] ` |
180- | ` tl ` | template literal | `` $0 `` |
181- | ` tlo ` | template literal operation | ` ${$1}$0 ` |
182- | ` tle ` | template literal expression | `` $1${$2}$0 `` |
183-
169+ | ` ande ` | logical AND expression | ` ${1:value} && ${0:value} ` |
170+ | ` nce ` | Nullish coalescing expression (??) | ` ${1:item} ?? ${0:default} ` |
171+ | ` eqe ` | strict equality expression | ` ${1:value} === ${2:value} ` |
172+ | ` ora ` | Logical OR assignment (\|\| =) | ` ${1:name} \|\|= ${0:default} ` |
173+ | ` nca ` | Nullish coalescing assignment (??=) | ` ${1:name} ??= ${0:default} ` |
174+ | ` inc ` | addition assignment | ` $1 += ${0:1} ` |
175+ | ` sub ` | subtraction assignment | ` $1 -= ${0:1} ` |
176+ | ` mul ` | multiplication assignment | ` $1 *= ${0:1} ` |
177+ | ` div ` | division assignment | ` $1 /= ${0:1} ` |
178+ | ` ol ` | object literal | ` { $1: $0 } ` |
179+ | ` al ` | array literal | ` [$0] ` |
180+ | ` tl ` | template literal | `` $0 `` |
181+ | ` tlo ` | template literal operation | ` ${$1}$0 ` |
182+ | ` tle ` | template literal expression | `` $1${$2}$0 `` |
183+
184+
185+ ### Console
184186
185187| Prefix | Description | Body |
186188| ------ | -------------------------- | --------------------------------------------- |
@@ -199,14 +201,16 @@ You can use these snippets along with Prettier/ESLint to have your code automati
199201| ` cel ` | console.error labeled | ` console.error('$1 ->', $1$2) ` |
200202| ` cwl ` | console.warn labeled | ` console.warn('$1 ->', ${2:$1}) ` |
201203
204+ ### Timers
202205
203- | Prefix | Description | Body |
204- | ------ | ---------------- | ---------------------------------------- |
205- | ` si ` | setInterval | ` setInterval(() => { $0 }, ${1:delay}) ` |
206- | ` st ` | setTimeout | ` setTimeout(() => { $0 }, ${1:delay}) ` |
207- | ` sim ` | setImmediate | ` setImmediate(() => { $0 }) ` |
208- | ` nt ` | process nextTick | ` process.nextTick(() => { $0 }) ` |
206+ | Prefix | Description | Body |
207+ | ------ | ---------------- | --------------------------------------- |
208+ | ` si ` | setInterval | ` setInterval(() => { $0 }, ${1:delay}) ` |
209+ | ` st ` | setTimeout | ` setTimeout(() => { $0 }, ${1:delay}) ` |
210+ | ` sim ` | setImmediate | ` setImmediate(() => { $0 }) ` |
211+ | ` nt ` | process nextTick | ` process.nextTick(() => { $0 }) ` |
209212
213+ ### JSON
210214
211215| Prefix | Description | Body |
212216| ------ | ---------------------------- | ------------------------------------------------------------- |
@@ -215,6 +219,7 @@ You can use these snippets along with Prettier/ESLint to have your code automati
215219| ` jsp ` | JSON.stringify pretty | ` JSON.stringify(${1:value}, null, 2) ` |
216220| ` jss ` | JSON.stringify if not string | ` typeof ${1:value} === 'string' ? value : JSON.stringify($1) ` |
217221
222+ ### DOM
218223
219224| Prefix | Description | Body |
220225| ------ | ----------------------------- | -------------------------------------------------------------------------------- |
@@ -226,15 +231,17 @@ You can use these snippets along with Prettier/ESLint to have your code automati
226231| ` gid ` | get element by id | ` ${1:document}.getElementById('$2') ` |
227232| ` on ` | event handler | ` ${1:emitter}.on('${2:event}', (${3:arguments}) => { $0 }) ` |
228233
234+ ### Dates
229235
230236| Prefix | Description | Body |
231237| ------ | ----------- | ---------------- |
232238| ` nd ` | new date | ` new Date($1)$0 ` |
233239| ` now ` | Date.now() | ` Date.now() ` |
234240
241+ ### Testing
235242
236- | Prefix | Description | Body |
237- | ------ | ------------------- | --------------------------------------------------- |
243+ | Prefix | Description | Body |
244+ | ------ | ------------------- | -------------------------------------------------- |
238245| ` desc ` | describe | ` describe('${1:description}', () => { $0 }) ` |
239246| ` cont ` | context | ` context('${1:description}', () => { $0 }) ` |
240247| ` it ` | test (synchronous) | ` it('${1:description}', () => { $0 }) ` |
@@ -248,15 +255,15 @@ You can use these snippets along with Prettier/ESLint to have your code automati
248255
249256### Types
250257
251- | Prefix | Description | Body |
252- | ------- | ----------- | ---------------------------------------------------------------------------------------- |
253- | ` aia ` | is array | ` Array.isArray($0) ` |
254- | ` tof ` | typeof | ` typeof ${1:value} === '${1}'$0 ` |
255- | ` iof ` | instanceof | ` ${1:object} instanceof ${0:Class ` |
256- | ` isnil ` | is nil | ` ${1:value} == null ` |
257- | ` nnil ` | is not nil | ` ${1:value} != null ` |
258- | ` isnan ` | is NaN | ` isNan($0) ` |
259- | ` nnan ` | is not NaN | ` !isNan($0) ` |
258+ | Prefix | Description | Body |
259+ | ------- | ----------- | ---------------------------------- |
260+ | ` aia ` | is array | ` Array.isArray($0) ` |
261+ | ` tof ` | typeof | ` typeof ${1:value} === '${1}'$0 ` |
262+ | ` iof ` | instanceof | ` ${1:object} instanceof ${0:Class ` |
263+ | ` isnil ` | is nil | ` ${1:value} == null ` |
264+ | ` nnil ` | is not nil | ` ${1:value} != null ` |
265+ | ` isnan ` | is NaN | ` isNan($0) ` |
266+ | ` nnan ` | is not NaN | ` !isNan($0) ` |
260267
261268
262269### Miscellaneous
@@ -273,15 +280,15 @@ You can use these snippets along with Prettier/ESLint to have your code automati
273280## Uncategorized
274281
275282⚠️ * working on it*
276- | Prefix | Description | Body |
277- | ------ | ---------------- | --------------------------------------- |
278- | ` uniq ` | uniq | ` [...new Set(${0:array})] ` |
283+ | Prefix | Description | Body |
284+ | ------ | ---------------- | ----------------------------------------- |
285+ | ` uniq ` | uniq | ` [...new Set(${0:array})] ` |
279286| ` pi ` | parse int | ` parseInt(${1:value}, ${2\|10,2,8,16\|}) ` |
280- | ` pf ` | parse float | ` parseFloat(${1:value}) ` |
281- | ` am ` | array me | ` [...${1:arr}$2]$0 ` |
282- | ` om ` | object merge | ` [...${1:arr}$2]$0 ` |
283- | ` aat ` | array at | ` ${1:items}.at(${2:0}) ` |
284- | ` seq ` | sequence of 0..n | ` [...Array(${1:length}).keys()]$0 ` |
287+ | ` pf ` | parse float | ` parseFloat(${1:value}) ` |
288+ | ` am ` | array me | ` [...${1:arr}$2]$0 ` |
289+ | ` om ` | object merge | ` [...${1:arr}$2]$0 ` |
290+ | ` aat ` | array at | ` ${1:items}.at(${2:0}) ` |
291+ | ` seq ` | sequence of 0..n | ` [...Array(${1:length}).keys()]$0 ` |
285292
286293
287294## TypeScript snippets
@@ -298,13 +305,13 @@ You can use these snippets along with Prettier/ESLint to have your code automati
298305
299306### Types
300307
301- | Prefix | Description | Body |
302- | ------ | ----------------- | ------------------------------------------------ |
303- | ` int ` | interface | ` interface ${1:Model} { $0 } ` |
304- | ` inte ` | interface extends | ` interface ${1:Model} extends ${2:Base} { $0 } ` |
305- | ` tp ` | type | ` type ${1:Model} = $0 ` |
306- | ` tpu ` | type union | ` type ${1:Model} = ${2:first} \| ${3:second} ` |
307- | ` tpi ` | type intersection | ` type ${1:Model} = ${2:first} & ${3:second} ` |
308+ | Prefix | Description | Body |
309+ | ------ | ----------------- | ----------------------------------------------- |
310+ | ` int ` | interface | ` interface ${1:Model} { $0 } ` |
311+ | ` inte ` | interface extends | ` interface ${1:Model} extends ${2:Base} { $0 } ` |
312+ | ` tp ` | type | ` type ${1:Model} = $0 ` |
313+ | ` tpu ` | type union | ` type ${1:Model} = ${2:first} \| ${3:second} ` |
314+ | ` tpi ` | type intersection | ` type ${1:Model} = ${2:first} & ${3:second} ` |
308315
309316* ...and many more (evertyhing will be documented)*
310317
0 commit comments