diff --git a/README.md b/README.md index 7d23cea..ea909b8 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@
- 🚧 *Still a work in progress. Some snippets may be changed or removed, and more will be added.* + 🚧 *Still a work in progress. Some snippets may be changed and more will be added.* ## Features - Contains over **180** snippets @@ -129,6 +129,18 @@ const $1 = '$2'; + +las +let string assignment + + + ```javascript +let $1 = '$2'; + ``` + + + + car const array assignment @@ -159,7 +171,7 @@ const $1 = { $0 } ```javascript -const { $0 } = ${1:object} +const { $0 } = ${1:object}; ``` @@ -171,7 +183,7 @@ const { $0 } = ${1:object} ```javascript -const [$0] = ${1:array} +const [$0] = ${1:array}; ``` @@ -241,7 +253,7 @@ if ($1) { ```javascript else { - $3 + $0 } ``` @@ -511,7 +523,7 @@ async ($1) => { ```javascript -for (let ${1:i} = 0, ${2:len} = ${3:iterable}.length; ${1:i} < ${2:len}; ${1:i}++) { +for (let ${1:i} = 0, ${2:len} = ${3:iter}.length; ${1:i} < ${2:len}; ${1:i}++) { $0 } ``` @@ -525,7 +537,7 @@ for (let ${1:i} = 0, ${2:len} = ${3:iterable}.length; ${1:i} < ${2:len}; ${1:i}+ ```javascript -for (let ${1:i} = ${2:iterable}.length - 1; ${1:i} >= 0; ${1:i}--) { +for (let ${1:i} = ${2:iter}.length - 1; ${1:i} >= 0; ${1:i}--) { $0 } ``` @@ -600,6 +612,20 @@ while (${1:true}) { } ``` + + + + +dwl +do while loop + + + ```javascript +do { + $0 +} while ($1) + ``` + @@ -675,12 +701,14 @@ class $1 extends ${2:Base} { -ctor +cst class constructor ```javascript -constructor($1) {$0} +constructor($1) { + $0 +} ``` @@ -724,7 +752,7 @@ get ${1:property}() { $0 } set ${1:property}(${2:value}) { - + $0 } ``` @@ -788,7 +816,7 @@ fetch('$1'$2).then(res => res.json()) ```javascript -const ${1|data,{ data }|} = await fetch('$2'$3).then(res => res.json()) +const ${1|data,...|} = await fetch('$2'$3).then(res => res.json()) ``` @@ -1151,7 +1179,7 @@ $1.reduce((${2:acc}, ${3:curr}) => { -reduce-right +reduceRight Array.reduceRight() @@ -1225,7 +1253,7 @@ $1.reverse() -map-string +mapStr Array.map() as string @@ -1237,7 +1265,7 @@ $1.map(String) -map-number +mapNum Array.map() as number @@ -1249,7 +1277,7 @@ $1.map(Number) -filter-true +filterTrue Array.filter() truthy @@ -1758,7 +1786,7 @@ console.log({ $CLIPBOARD }) ```javascript -console.log('$1 ->', $1$2) +console.log('$1 :', $1$2) ``` @@ -1770,7 +1798,7 @@ console.log('$1 ->', $1$2) ```javascript -console.error('$1 ->', $1$2) +console.error('$1 :', $1$2) ``` @@ -1782,7 +1810,7 @@ console.error('$1 ->', $1$2) ```javascript -console.warn('$1 ->', ${2:$1}) +console.warn('$1 :', ${2:$1}) ``` @@ -1891,8 +1919,8 @@ JSON.stringify(${1:value}) -jsp -JSON stringify (pretty) +jsf +JSON stringify (formatted) ```javascript @@ -1908,7 +1936,7 @@ JSON.stringify(${1:value}, null, 2) ```javascript -typeof ${1:value} === 'string' ? value : JSON.stringify($1) +typeof $1 === 'string' ? $1 : JSON.stringify($1) ``` @@ -2047,6 +2075,41 @@ Date.now() +### Node + + + + + + + + + + + + + + + + + + + + +
PrefixNameBody
rerequire + + ```javascript +require('${1:module}') + ``` + +
reqrequire assignment + + ```javascript +const ${1} = require('${1:module}'); + ``` + +
+ ### Testing @@ -2213,7 +2276,7 @@ Array.isArray($0) @@ -2351,8 +2414,8 @@ import.meta.env.$0
```javascript -typeof ${1:value} === '${2|bigint,boolean,function,number,object,symbol,undefined|}' +typeof ${1:value} === '${2|undefined,...|}' ```
-### Uncategorized -Will be sorted into appropriate categories in the future. +### Intl +Internationalization API @@ -2362,36 +2425,120 @@ Will be sorted into appropriate categories in the future. - - + + - - + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + +
uniqarray of unique valuesinfIntl.NumberFormat ```javascript -[...new Set($0)] +new Intl.NumberFormat('${1|en-US,...|}'$3).format($2); ```
piparse intinfsIntl.NumberFormat style ```javascript -parseInt($1, ${2|10,2,8,16|}) +new Intl.NumberFormat('${1|en-US,...|}', { + style: '${3|decimal,...|}',$4 +}).format($2); ```
pfparse floatinfcIntl.NumberFormat as currency ```javascript -parseFloat($1) +new Intl.NumberFormat('${1|en-US,...|}', { + style: 'currency', + currency: '${3|USD,...|}',$4 +}).format($2); + ``` + +
infpIntl.NumberFormat as percentage + + ```javascript +new Intl.NumberFormat('${1|en-US,...|}', { + style: 'percent',$3 +}).format($2); + ``` + +
infuIntl.NumberFormat as unit + + ```javascript +new Intl.NumberFormat('${1|en-US,...|}', { + style: 'unit', + unit: '${3|acceleration-g-force,...|}', + unitDisplay: '${4|long,...|}',$0 +}).format($2); + ``` + +
idtfIntl.DateTimeFormat + + ```javascript +new Intl.DateTimeFormat('${1|en-US,...|}'$3).format($2); + ``` + +
idtfsIntl.DateTimeFormat with options + + ```javascript +new Intl.DateTimeFormat ('${1|en-US,...|}', { + dateStyle: '$3',$0 +}).format($2); + ``` + +
+ +### Uncategorized +Will be sorted into appropriate categories in the future. + + + + + + + + + + + + @@ -2422,12 +2569,36 @@ parseFloat($1) - - + + + + + + + + + + + + + + @@ -2442,6 +2613,18 @@ $1.at(${2:0}) [...Array(${1:length}).keys()] ``` + + + + + + +
PrefixNameBody
aatarray.at + + ```javascript +$1.at(${2:0}) ```
aatarray.atuniqarray of unique values ```javascript -$1.at(${2:0}) +[...new Set($0)] + ``` + +
piparse int + + ```javascript +parseInt($1, ${2|10,...|}) + ``` + +
pfparse float + + ```javascript +parseFloat($1) ```
tethrow error + + ```javascript +throw new ${1|Error,...|}($0); + ``` +
diff --git a/package.json b/package.json index f346c06..f76295c 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "modern-js-snippets", "displayName": "Modern JavaScript Snippets âš¡", - "version": "0.4.1", + "version": "0.5.0", "license": "MIT", "description": "Code snippets for modern JavaScript & TypeScript", "icon": "assets/icon.png", diff --git a/src/docs-gen/snippets.ts b/src/docs-gen/snippets.ts index 2287c11..f30e624 100644 --- a/src/docs-gen/snippets.ts +++ b/src/docs-gen/snippets.ts @@ -18,11 +18,19 @@ type SnippetRow = { body: string | string[]; }; +const truncateOptions = (str: string) => { + const regex = /\|([^|]+)\|/g; + return str.replace(regex, (_match, p1) => { + const [first] = p1.split(",").map((o: string) => o.trim()); + return `|${first},...|`; + }); +}; + const snippetRow = ({ prefix, name, body }: SnippetRow) => { const cols = joinByNewLine([ $colCode(prefix), $col(name), - $colCodeBlock(parseMultiline(body)), + $colCodeBlock(truncateOptions(parseMultiline(body))), ]); return $row(cols); diff --git a/src/snippets/js/app.ts b/src/snippets/js/app.ts index ff5cba1..7366473 100644 --- a/src/snippets/js/app.ts +++ b/src/snippets/js/app.ts @@ -1,8 +1,8 @@ import { arrayMethods } from "./array-methods.ts"; +import { assignments } from "./assignments.ts"; import { classes } from "./classes.ts"; import { console } from "./console.ts"; import { dates } from "./dates.ts"; -import { assignments } from "./assignments.ts"; import { dom } from "./dom.ts"; import { flowControl } from "./flow-control.ts"; import { functions } from "./functions.ts"; @@ -10,6 +10,7 @@ import { json } from "./json.ts"; import { loops } from "./loops.ts"; import { misc } from "./misc.ts"; import { modules } from "./modules.ts"; +import { node } from "./node.ts"; import { objects } from "./objects.ts"; import { operatorsExpressionsLiterals } from "./operators-expressions-literals.ts"; import { promises } from "./promises.ts"; @@ -18,6 +19,7 @@ import { testing } from "./testing.ts"; import { timers } from "./timers.ts"; import { types } from "./types.ts"; import { uncategorized } from "./uncategorized.ts"; +import { intl } from "./intl.ts"; export const javascript = [ assignments, @@ -36,8 +38,10 @@ export const javascript = [ json, dom, dates, + node, testing, types, misc, + intl, uncategorized, ]; diff --git a/src/snippets/js/array-methods.ts b/src/snippets/js/array-methods.ts index d66649e..dde3b1c 100644 --- a/src/snippets/js/array-methods.ts +++ b/src/snippets/js/array-methods.ts @@ -17,7 +17,7 @@ export const arrayMethods: XSnippetDefinition = { name: "Array.reduce()", body: "$1.reduce((${2:acc}, ${3:curr}) => {\n\t$0\n}, ${4:initial})", }, - "reduce-right": { + reduceRight: { name: "Array.reduceRight()", body: "$1.reduceRight((${2:acc}, ${3:curr}) => {\n\t$0\n}, ${4:initial})", }, @@ -41,15 +41,15 @@ export const arrayMethods: XSnippetDefinition = { name: "Array.reverse()", body: "$1.reverse()", }, - "map-string": { + mapStr: { name: "Array.map() as string", body: "$1.map(String)", }, - "map-number": { + mapNum: { name: "Array.map() as number", body: "$1.map(Number)", }, - "filter-true": { + filterTrue: { name: "Array.filter() truthy", body: "$1.filter(Boolean)", }, diff --git a/src/snippets/js/assignments.ts b/src/snippets/js/assignments.ts index 7bae8e0..a0c0554 100644 --- a/src/snippets/js/assignments.ts +++ b/src/snippets/js/assignments.ts @@ -25,6 +25,10 @@ export const assignments: XSnippetDefinition = { name: "const string assignment", body: "const $1 = '$2';", }, + las: { + name: "let string assignment", + body: "let $1 = '$2';", + }, car: { name: "const array assignment", body: "const $1 = [$0]", @@ -35,11 +39,11 @@ export const assignments: XSnippetDefinition = { }, dob: { name: "object destructuring", - body: "const { $0 } = ${1:object}", + body: "const { $0 } = ${1:object};", }, dar: { name: "array destructuring", - body: "const [$0] = ${1:array}", + body: "const [$0] = ${1:array};", }, }, }; diff --git a/src/snippets/js/classes.ts b/src/snippets/js/classes.ts index 4155340..e6c2c75 100644 --- a/src/snippets/js/classes.ts +++ b/src/snippets/js/classes.ts @@ -33,9 +33,9 @@ export const classes: XSnippetDefinition = { "}", ], }, - ctor: { + cst: { name: "class constructor", - body: "constructor($1) {$0}", + body: "constructor($1) {\n\t$0\n}", }, get: { name: "getter", @@ -48,7 +48,7 @@ export const classes: XSnippetDefinition = { gs: { name: "getter and setter", body: - "get ${1:property}() {\n\t$0\n}\nset ${1:property}(${2:value}) {\n\t\n}", + "get ${1:property}() {\n\t$0\n}\nset ${1:property}(${2:value}) {\n\t$0\n}", }, met: { name: "method", diff --git a/src/snippets/js/console.ts b/src/snippets/js/console.ts index 954987f..4e0ffdf 100644 --- a/src/snippets/js/console.ts +++ b/src/snippets/js/console.ts @@ -53,15 +53,15 @@ export const console = { }, cll: { name: "console.log (labeled)", - body: "console.log('$1 ->', $1$2)", + body: "console.log('$1 :', $1$2)", }, cel: { name: "console.error (labeled)", - body: "console.error('$1 ->', $1$2)", + body: "console.error('$1 :', $1$2)", }, cwl: { name: "console.warn (labeled)", - body: "console.warn('$1 ->', ${2:$1})", + body: "console.warn('$1 :', ${2:$1})", }, }, }; diff --git a/src/snippets/js/flow-control.ts b/src/snippets/js/flow-control.ts index ea469eb..21d8c80 100644 --- a/src/snippets/js/flow-control.ts +++ b/src/snippets/js/flow-control.ts @@ -19,7 +19,7 @@ export const flowControl: XSnippetDefinition = { }, el: { name: "else statement", - body: "else {\n\t$3\n}", + body: "else {\n\t$0\n}", }, ei: { name: "else if statement", diff --git a/src/snippets/js/intl.ts b/src/snippets/js/intl.ts new file mode 100644 index 0000000..5280483 --- /dev/null +++ b/src/snippets/js/intl.ts @@ -0,0 +1,61 @@ +export const intl = { + meta: { + title: "Intl", + description: "Internationalization API", + }, + snippets: { + inf: { + name: "Intl.NumberFormat", + body: + "new Intl.NumberFormat('${1|en-US,en-GB,en-CA,de-DE,fr-FR,es-ES,zh-CN,ru-RU,ja-JP|}'$3).format($2);", + }, + infs: { + name: "Intl.NumberFormat style", + body: [ + "new Intl.NumberFormat('${1|en-US,en-GB,en-CA,de-DE,fr-FR,es-ES,zh-CN,ru-RU,ja-JP|}', {", + "\tstyle: '${3|decimal,currency,percent,unit|}',$4", + "}).format($2);", + ], + }, + infc: { + name: "Intl.NumberFormat as currency", + body: [ + "new Intl.NumberFormat('${1|en-US,en-GB,en-CA,de-DE,fr-FR,es-ES,zh-CN,ru-RU,ja-JP|}', {", + "\tstyle: 'currency',", + "\tcurrency: '${3|USD,EUR,GBP,AUD,CAD,JPY|}',$4", + "}).format($2);", + ], + }, + infp: { + name: "Intl.NumberFormat as percentage", + body: [ + "new Intl.NumberFormat('${1|en-US,en-GB,en-CA,de-DE,fr-FR,es-ES,zh-CN,ru-RU,ja-JP|}', {", + "\tstyle: 'percent',$3", + "}).format($2);", + ], + }, + infu: { + name: "Intl.NumberFormat as unit", + body: [ + "new Intl.NumberFormat('${1|en-US,en-GB,en-CA,de-DE,fr-FR,es-ES,zh-CN,ru-RU,ja-JP|}', {", + "\tstyle: 'unit',", + "\tunit: '${3|acceleration-g-force,acceleration-meter-per-square-second,angle-arc-minute,angle-arc-second,angle-degree,angle-radian,angle-revolution,area-acre,area-hectare,area-square-centimeter,area-square-foot,area-square-inch,area-square-kilometer,area-square-meter,area-square-mile,area-square-yard,area-dunam,concentr-karat,concentr-milligram-ofglucose-per-deciliter,concentr-millimole-per-liter,concentr-percent,concentr-permille,concentr-permyriad,concentr-permillion,concentr-mole,concentr-item,concentr-portion,concentr-ofglucose,consumption-liter-per-100-kilometer,consumption-liter-per-kilometer,consumption-mile-per-gallon,consumption-mile-per-gallon-imperial,digital-bit,digital-byte,digital-gigabit,digital-gigabyte,digital-kilobit,digital-kilobyte,digital-megabit,digital-megabyte,digital-petabyte,digital-terabit,digital-terabyte,duration-century,duration-decade,duration-day,duration-day-person,duration-hour,duration-microsecond,duration-millisecond,duration-minute,duration-month,duration-month-person,duration-nanosecond,duration-quarter,duration-second,duration-week,duration-week-person,duration-year,duration-year-person,electric-ampere,electric-milliampere,electric-ohm,electric-volt,energy-calorie,energy-foodcalorie,energy-joule,energy-kilocalorie,energy-kilojoule,energy-kilowatt-hour,energy-electronvolt,energy-therm-us,energy-british-thermal-unit,force-pound-force,force-newton,force-kilowatt-hour-per-100-kilometer,frequency-gigahertz,frequency-hertz,frequency-kilohertz,frequency-megahertz,graphics-dot,graphics-dot-per-centimeter,graphics-dot-per-inch,graphics-em,graphics-megapixel,graphics-pixel,graphics-pixel-per-centimeter,graphics-pixel-per-inch,length-100-kilometer,length-astronomical-unit,length-centimeter,length-decimeter,length-fathom,length-foot,length-furlong,length-inch,length-kilometer,length-light-year,length-meter,length-micrometer,length-mile,length-mile-scandinavian,length-millimeter,length-nanometer,length-nautical-mile,length-parsec,length-picometer,length-point,length-yard,length-earth-radius,length-solar-radius,light-candela,light-lumen,light-lux,light-solar-luminosity,mass-carat,mass-grain,mass-gram,mass-kilogram,mass-tonne,mass-microgram,mass-milligram,mass-ounce,mass-ounce-troy,mass-pound,mass-stone,mass-ton,mass-dalton,mass-earth-mass,mass-solar-mass,power-gigawatt,power-horsepower,power-kilowatt,power-megawatt,power-milliwatt,power-watt,pressure-atmosphere,pressure-hectopascal,pressure-inch-ofhg,pressure-bar,pressure-millibar,pressure-millimeter-ofhg,pressure-pound-force-per-square-inch,pressure-pascal,pressure-kilopascal,pressure-megapascal,pressure-ofhg,speed-kilometer-per-hour,speed-knot,speed-meter-per-second,speed-mile-per-hour,temperature-celsius,temperature-fahrenheit,temperature-generic,temperature-kelvin,torque-pound-force-foot,torque-newton-meter,volume-acre-foot,volume-bushel,volume-centiliter,volume-cubic-centimeter,volume-cubic-foot,volume-cubic-inch,volume-cubic-kilometer,volume-cubic-meter,volume-cubic-mile,volume-cubic-yard,volume-cup,volume-cup-metric,volume-deciliter,volume-dessert-spoon,volume-dessert-spoon-imperial,volume-drop,volume-dram,volume-jigger,volume-pinch,volume-quart-imperial,volume-fluid-ounce,volume-fluid-ounce-imperial,volume-gallon,volume-gallon-imperial,volume-hectoliter,volume-liter,volume-megaliter,volume-milliliter,volume-pint,volume-pint-metric,volume-quart,volume-tablespoon,volume-teaspoon,volume-barrel|}',", + "\tunitDisplay: '${4|long,short,narrow|}',$0", + "}).format($2);", + ], + }, + idtf: { + name: "Intl.DateTimeFormat", + body: + "new Intl.DateTimeFormat('${1|en-US,en-GB,en-CA,de-DE,fr-FR,es-ES,zh-CN,ru-RU,ja-JP|}'$3).format($2);", + }, + idtfs: { + name: "Intl.DateTimeFormat with options", + body: [ + "new Intl.DateTimeFormat ('${1|en-US,en-GB,en-CA,de-DE,fr-FR,es-ES,zh-CN,ru-RU,ja-JP|}', {", + "\tdateStyle: '$3',$0", + "}).format($2);", + ], + }, + }, +}; diff --git a/src/snippets/js/json.ts b/src/snippets/js/json.ts index bbcc2ef..64d4f4a 100644 --- a/src/snippets/js/json.ts +++ b/src/snippets/js/json.ts @@ -13,13 +13,13 @@ export const json: XSnippetDefinition = { name: "JSON stringify", body: "JSON.stringify(${1:value})", }, - jsp: { - name: "JSON stringify (pretty)", + jsf: { + name: "JSON stringify (formatted)", body: "JSON.stringify(${1:value}, null, 2)", }, jss: { name: "JSON.stringify if not string", - body: "typeof ${1:value} === 'string' ? value : JSON.stringify($1)", + body: "typeof $1 === 'string' ? $1 : JSON.stringify($1)", }, }, }; diff --git a/src/snippets/js/loops.ts b/src/snippets/js/loops.ts index eefa1df..e48bf8b 100644 --- a/src/snippets/js/loops.ts +++ b/src/snippets/js/loops.ts @@ -8,12 +8,12 @@ export const loops: XSnippetDefinition = { fl: { name: "for loop", body: - "for (let ${1:i} = 0, ${2:len} = ${3:iterable}.length; ${1:i} < ${2:len}; ${1:i}++) {\n\t$0\n}", + "for (let ${1:i} = 0, ${2:len} = ${3:iter}.length; ${1:i} < ${2:len}; ${1:i}++) {\n\t$0\n}", }, rfl: { name: "reverse for loop", body: - "for (let ${1:i} = ${2:iterable}.length - 1; ${1:i} >= 0; ${1:i}--) {\n\t$0\n}", + "for (let ${1:i} = ${2:iter}.length - 1; ${1:i} >= 0; ${1:i}--) {\n\t$0\n}", }, flr: { name: "for loop (range)", @@ -35,5 +35,9 @@ export const loops: XSnippetDefinition = { name: "while loop", body: "while (${1:true}) {\n\t$0\n}", }, + dwl: { + name: "do while loop", + body: "do {\n\t$0\n} while ($1)", + }, }, }; diff --git a/src/snippets/js/node.ts b/src/snippets/js/node.ts new file mode 100644 index 0000000..5374158 --- /dev/null +++ b/src/snippets/js/node.ts @@ -0,0 +1,17 @@ +import { XSnippetDefinition } from "../../models/app.ts"; + +export const node: XSnippetDefinition = { + meta: { + title: "Node", + }, + snippets: { + re: { + name: "require", + body: "require('${1:module}')", + }, + req: { + name: "require assignment", + body: "const ${1} = require('${1:module}');", + }, + }, +}; diff --git a/src/snippets/js/types.ts b/src/snippets/js/types.ts index 373355e..edfcdc6 100644 --- a/src/snippets/js/types.ts +++ b/src/snippets/js/types.ts @@ -12,7 +12,7 @@ export const types: XSnippetDefinition = { tof: { name: "typeof", body: - "typeof ${1:value} === '${2|bigint,boolean,function,number,object,symbol,undefined|}'", + "typeof ${1:value} === '${2|undefined,string,number,object,function,boolean,symbol,bigint|}'", }, iof: { name: "instanceof", diff --git a/src/snippets/js/uncategorized.ts b/src/snippets/js/uncategorized.ts index 088ee29..6d7a78f 100644 --- a/src/snippets/js/uncategorized.ts +++ b/src/snippets/js/uncategorized.ts @@ -6,6 +6,18 @@ export const uncategorized: XSnippetDefinition = { description: "Will be sorted into appropriate categories in the future.", }, snippets: { + aat: { + name: "array.at", + body: "$1.at(${2:0})", + }, + am: { + name: "array merge", + body: "[...$1]", + }, + om: { + name: "object merge", + body: "{ ...$1 }", + }, uniq: { name: "array of unique values", body: "[...new Set($0)]", @@ -18,21 +30,13 @@ export const uncategorized: XSnippetDefinition = { name: "parse float", body: "parseFloat($1)", }, - am: { - name: "array merge", - body: "[...$1]", - }, - om: { - name: "object merge", - body: "{ ...$1 }", - }, - aat: { - name: "array.at", - body: "$1.at(${2:0})", - }, seq: { name: "sequence of 0..n", body: "[...Array(${1:length}).keys()]", }, + te: { + name: "throw error", + body: ["throw new ${1|Error,TypeError,RangeError|}($0);"], + }, }, };