{"id":13624704,"url":"https://github.com/t7yang/vscode-hyper-javascript-snippets","last_synced_at":"2025-04-16T01:32:03.328Z","repository":{"id":54535969,"uuid":"124655171","full_name":"t7yang/vscode-hyper-javascript-snippets","owner":"t7yang","description":"Visual Studio Code snippet extension for JavaScript and TypeScript","archived":false,"fork":false,"pushed_at":"2023-11-26T11:55:02.000Z","size":184,"stargazers_count":16,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-08-01T22:02:00.159Z","etag":null,"topics":["hyper-javascript-snippets","javascript","javascript-snippets","snippets","snippets-collection","typescript","typescript-snippets","vscode"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/t7yang.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-03-10T12:49:29.000Z","updated_at":"2023-10-06T14:00:23.000Z","dependencies_parsed_at":"2024-01-14T08:07:23.850Z","dependency_job_id":null,"html_url":"https://github.com/t7yang/vscode-hyper-javascript-snippets","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/t7yang%2Fvscode-hyper-javascript-snippets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/t7yang%2Fvscode-hyper-javascript-snippets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/t7yang%2Fvscode-hyper-javascript-snippets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/t7yang%2Fvscode-hyper-javascript-snippets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/t7yang","download_url":"https://codeload.github.com/t7yang/vscode-hyper-javascript-snippets/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223691732,"owners_count":17186873,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hyper-javascript-snippets","javascript","javascript-snippets","snippets","snippets-collection","typescript","typescript-snippets","vscode"],"created_at":"2024-08-01T21:01:45.386Z","updated_at":"2024-11-08T13:31:01.703Z","avatar_url":"https://github.com/t7yang.png","language":"TypeScript","readme":"# Hyper JavaScript Snippets (Visual Studio Code)\n\n[![Version](https://img.shields.io/vscode-marketplace/v/t7yang.hyper-javascript-snippets.svg)](https://marketplace.visualstudio.com/items?itemName=t7yang.hyper-javascript-snippets)\n[![Downloads](https://img.shields.io/vscode-marketplace/d/t7yang.hyper-javascript-snippets.svg)](https://marketplace.visualstudio.com/items?itemName=t7yang.hyper-javascript-snippets)\n[![Rating](https://img.shields.io/vscode-marketplace/r/t7yang.hyper-javascript-snippets.svg)](https://marketplace.visualstudio.com/items?itemName=t7yang.hyper-javascript-snippets)\n\n## Introduction\nHyper 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.\n\nInstall from VSCode Extension Marketplace [Hyper JavaScript Snippets](https://marketplace.visualstudio.com/items?itemName=t7yang.hyper-javascript-snippets).\n\n## Advantages\n1. Easy Learn - related snippets shared a same namespace or pattern, like every `for` loop prefix start with `fo`, all assignment snippet share `*a` pattern.\n2. Composable - No semicolon (point-free friendly), no newline, no placeholder, small snippet, the very end tabstop as possible, make composing snippets friendly.\n3. Avoid conflict - Try to avoid snippet's prefix conflict with variable name and built-in snippet's prefix.\n\n## Suggestions\n- Use [Prettier](https://prettier.io/) to help you formating your code.\n- Disable built-in snippets with [Control Snippets](https://marketplace.visualstudio.com/items?itemName=svipas.control-snippets) or hiding with built-in command [`Insert Snippet`](https://marketplace.visualstudio.com/items?itemName=svipas.control-snippets).\n- Set `\"editor.snippetSuggestions\": \"top\"`.\n- Set `\"editor.formatOnSave\": true,`.\n- Set `\"editor.suggest.snippetsPreventQuickSuggestions\": false,`.\n\n## Known issues\n- Moving cursor on snippet content break tab stop ([intented](https://github.com/Microsoft/vscode/issues/32790#issuecomment-323655481)), but okey on user input content 😩.\n  - Can not use \"choice\" to provide selection, affect: destrucring assignment...\n- There is no intenllisense / autocomplete hint when typing in active snippet (VSCode default).\n  - Affect: No more autocomplete hint including any snippet, object methods, or global function .\n  - Turn off `editor.suggest.snippetsPreventQuickSuggestions` help a bit.\n- Can not correctly generate paired bracket when there is a character right beside cursor.\n  - A space added before `:`, affect: `sw`, `case`, `pd`, etc.\n\n## FAQ\n\n\u003e How to remember so many snippets prefix for new user? \u003cbr /\u003e\n\nRelated snippets shared a same namespace, like for every `for` loop snippets prefix are start with `fo`, all assignment snippets shared `*a` pattern.\n\n### Declarations\n| Prefix | Desc                                    | Body                   |\n| -----: | --------------------------------------- | ---------------------- |\n|   `va` | var assignment                          | `var $1 = $0`          |\n|   `la` | let assignment (ES2015)                 | `let $1 = $0`          |\n|   `ca` | const assignment (ES2015)               | `const $1 = $0`        |\n|  `vad` | var destructuring assignment (ES2015)   | `var ${0:dest} = $1`   |\n|  `lad` | let destructuring assignment (ES2015)   | `let ${0:dest} = $1`   |\n|  `cad` | const destructuring assignment (ES2015) | `const ${0:dest} = $1` |\n\n### Conditional\n| Prefix | Desc              | Body                 |\n| -----: | ----------------- | -------------------- |\n|   `if` | if statement      | `if ($1) $0`         |\n|   `el` | else statement    | `else $0`            |\n| `ifel` | if/else statement | `if ($1) $2 else $0` |\n| `elif` | else if statement | `else if ($1) $0`    |\n|  `ter` | ternary operator  | `$1 ? $2 : $0`       |\n|   `sw` | switch case       | `switch ($1) {$2}$0` |\n| `case` | switch's case     | `case $1 : $0`       |\n\n### Statement\n| Prefix | Desc                       | Body                                  |\n| -----: | -------------------------- | ------------------------------------- |\n|   `fo` | for loop                   | `for ($1 ; $2 ; $3) $0`               |\n|  `foi` | for in loop                | `for (const $1 in $2) $0`             |\n|  `fof` | for of loop (ES2015)       | `for (const $1 of $2) $0`             |\n|  `foa` | for await of loop (ES2018) | `for await (const $1 of $2) $0`       |\n|   `wh` | while loop                 | `while ($1) $0`                       |\n|   `tc` | try/catch                  | `try {$1} catch $2 {$0}`              |\n|   `tf` | try/finally                | `try {$1} finally {$0}`               |\n|  `tcf` | try/catch/finally          | `try {$1} catch $2 {$3} finally {$0}` |\n\n### Functions\n| Prefix | Desc                                                        | Body                           |\n| -----: | ----------------------------------------------------------- | ------------------------------ |\n|    `f` | function                                                    | `function ($1) {$0}`           |\n|    `f` | function (TypeScript)                                       | `function ($1)$2 {$0}`         |\n|   `fn` | named/generator function                                    | `function $1($2) {$0}`         |\n|   `fn` | named/generator function (TypeScript)                       | `function $1($2)$3 {$0}`       |\n|   `fa` | async function                                              | `async function ($1) {$0}`     |\n|   `fa` | async function (TypeScript)                                 | `async function ($1)$2 {$0}`   |\n|  `fna` | async named/generator function                              | `async function $1($2) {$0}`   |\n|  `fna` | async named/generator function (TypeScript)                 | `async function $1($2)$3 {$0}` |\n|   `af` | arrow function (ES2015)                                     | `($1) =\u003e $0`                   |\n|  `afa` | async arrow function (ES2015)                               | `async ($1) =\u003e $0`             |\n|   `ar` | arrow function with return type (ES2015, TypeScript)        | `($1)$2 =\u003e $0`                 |\n|  `ara` | async arrow function with return type (ES2015, TypeScript)  | `async ($1)$2 =\u003e $0`           |\n|   `ag` | generic/generator arrow function (ES2015, TypeScript)       | `$1($2)$3 =\u003e $0`               |\n|  `aga` | async generic/generator arrow function (ES2015, TypeScript) | `async $1($2)$3 =\u003e $0`         |\n| `iife` | immediately-invoked function expression (IIFE)              | `($2)($1)$0`                   |\n|   `pd` | parameter destructuring with type (TypeScript)              | `${0:param} : ${1:type}`       |\n\n### Iterables\n| Prefix | Desc             | Body                               |\n| -----: | ---------------- | ---------------------------------- |\n|  `seq` | sequence of 0..n | `[...Array(${1:length}).keys()]$0` |\n\n### Objects\n| Prefix | Desc           | Body         |\n| -----: | -------------- | ------------ |\n|   `ol` | object literal | `{ $1: $0 }` |\n\n### Classes\n| Prefix | Desc                       | Body                                                                          |\n| -----: | -------------------------- | ----------------------------------------------------------------------------- |\n|   `cs` | class (ES2015)             | \u003ccode\u003eclass ${1:name} {\u003cbr\u003e\u0026nbsp;\u0026nbsp;$0\u003cbr\u003e}\u003c/code\u003e                         |\n|  `cse` | class extends (ES2015)     | \u003ccode\u003eclass ${1:name} extends ${2:base} {\u003cbr\u003e\u0026nbsp;\u0026nbsp;$0\u003cbr\u003e}\u003c/code\u003e       |\n|  `cst` | class constructor (ES2015) | `constructor($1) {$0}`                                                        |\n|  `csm` | method (ES2015)            | `${1:name}($2) {$0}`                                                          |\n| `csma` | async method (ES2015)      | `async ${1:name}($2) {$0}`                                                    |\n| `gter` | getter (ES2015)            | `get ${1:property}() {$0}`                                                    |\n| `ster` | setter (ES2015)            | `set ${1:property}(${2:value}) {$0}`                                          |\n|   `gs` | getter and setter (ES2015) | \u003ccode\u003eget ${1:property}() {$0}\u003cbr\u003e\u003cbr\u003eset ${1:property}(${2:value}) {}\u003c/code\u003e |\n\n### Types\n| Prefix | Desc       | Body                                |\n| -----: | ---------- | ----------------------------------- |\n|  `tof` | typeof     | `typeof ${1:source} === $0`         |\n|  `iof` | instanceof | `${1:source} instanceof ${0:Class}` |\n\n### Promises\n| Prefix | Desc                         | Body                       |\n| -----: | ---------------------------- | -------------------------- |\n|   `pr` | Promise (ES2015)             | `new Promise($0)`          |\n|  `prs` | Promise resolve (ES2015)     | `Promise.resolve($1)$0`    |\n|  `prj` | Promise reject (ES2015)      | `Promise.reject($1)$0`     |\n|  `pra` | Promise all (ES2015)         | `Promise.all($1)$0`        |\n| `pras` | Promise all settled (ES2020) | `Promise.allSettled($1)$0` |\n|  `prn` | Promise any (ES2021)         | `Promise.any($1)$0`        |\n|  `prt` | Promise type (TypeScript)    | `Promise\u003c$0\u003e`              |\n\n### ES2015 Modules\n|  Prefix | Desc                               | Body                                        |\n| ------: | ---------------------------------- | ------------------------------------------- |\n|   `exp` | export (ES2015)                    | `deprecated: export $0`                     |\n|  `expd` | export default (ES2015)            | `deprecated: export default $0`             |\n| `expas` | export as (ES2015)                 | `deprecated: export { $1 as $2 };$0`        |\n|  `expf` | export from (ES2015)               | `deprecated: export ${2:name} from '$1';$0` |\n| `expaf` | export all from (ES2015)           | `deprecated: export *$2 from '$1';$0`       |\n|    `ex` | export (ES2015)                    | `export $0`                                 |\n|   `exd` | export default (ES2015)            | `export default $0`                         |\n|  `exas` | export as (ES2015)                 | `export { $1 as $2 };$0`                    |\n|   `exf` | export from (ES2015)               | `export ${2:name} from '$1';$0`             |\n|  `exaf` | export all from (ES2015)           | `export *$2 from '$1';$0`                   |\n|    `im` | import (ES2015)                    | `import$0`                                  |\n|   `imm` | import.meta (ES2015)               | `import.meta$0`                             |\n|   `imu` | import.meta.url (ES2015)           | `import.meta.url$0`                         |\n|   `imp` | import module (ES2015)             | `import ${2:name} from '$1'$3;$0`           |\n|   `imd` | import module dynamically (ES2020) | `import($1)$0`                              |\n|   `imf` | import file (ES2015)               | `import '$1';$0`                            |\n| `impas` | import module as (ES2015)          | `import ${2:*} as ${3:name} from '$1'$3;$0` |\n\n### Node.js\n| Prefix | Desc                   | Body                                 |\n| -----: | ---------------------- | ------------------------------------ |\n|   `cb` | Node.js style callback | `(err, ${1:response}) =\u003e {$0}`       |\n|   `re` | require                | `require(${1:path})$0`               |\n|  `req` | require assignment     | `const ${2:name} = require('$1');$0` |\n|   `em` | exports.member         | `exports.$1 = $2;$0`                 |\n|   `me` | module.exports         | `module.exports = $1$0`              |\n|   `on` | event handler          | `on('${1:event}', ${2:callback});$0` |\n\n### Console\n| Prefix | Desc                   | Body                                                                  |\n| -----: | ---------------------- | --------------------------------------------------------------------- |\n|   `cl` | console.log            | `console.log($1)$0`                                                   |\n|  `cla` | console.assert         | `console.assert($1)$0`                                                |\n| `clcl` | console.clear          | `console.clear($1)$0`                                                 |\n|  `clc` | console.count          | `console.count($1)$0`                                                 |\n| `clcr` | console.countReset     | `console.countReset($1)$0`                                            |\n|  `cld` | console.debug          | `console.debug($1)$0`                                                 |\n| `cldi` | console.dir            | `console.dir($1)$0`                                                   |\n| `cldx` | console.dirxml         | `console.dirxml($1)$0`                                                |\n|  `cle` | console.error          | `console.error($1)$0`                                                 |\n|  `clg` | console.group          | \u003ccode\u003econsole.group($1)\u003cbr\u003e$0\u003cbr\u003econsole.groupEnd($1)\u003c/code\u003e          |\n| `clgc` | console.groupCollapsed | \u003ccode\u003econsole.groupCollapsed($1)\u003cbr\u003e$0\u003cbr\u003econsole.groupEnd($1)\u003c/code\u003e |\n|  `cli` | console.info           | `console.info($1)$0`                                                  |\n| `cltb` | console.table          | `console.table($1)$0`                                                 |\n|  `clt` | console.time           | \u003ccode\u003econsole.time('$1') \u003cbr\u003e$0\u003cbr\u003e console.timeEnd('$1')\u003c/code\u003e      |\n| `cltl` | console.timeLog        | `console.timeLog($1)$0`                                               |\n| `cltr` | console.trace          | `console.trace($1)$0`                                                 |\n|  `clw` | console.warn           | `console.warn($1)$0`                                                  |\n\n### Timers\n|  Prefix | Desc                       | Body                                       |\n| ------: | -------------------------- | ------------------------------------------ |\n|  `sett` | setTimeout                 | `setTimeout(${2:callback}, ${1:delay})$0`  |\n| `setin` | setInterval                | `setInterval(${2:callback}, ${1:delay})$0` |\n| `setim` | setImmediate (node.js)     | `setImmediate(${1:callback}$2)$0`          |\n|    `nt` | process nextTick (node.js) | `process.nextTick($1);$0`                  |\n\n### Miscellaneous\n| Prefix | Desc                          | Body            |\n| -----: | ----------------------------- | --------------- |\n|   `us` | insert 'use strict' statement | `'use strict';` |\n\n### TypeScript (Data Types)\n| Prefix | Desc                    | Body                          |\n| -----: | ----------------------- | ----------------------------- |\n|  `typ` | type (TypeScript)       | `type ${1:name} = $0`         |\n|  `int` | interface (TypeScript)  | `interface ${1:name} {$2}$0`  |\n|  `enu` | enum (TypeScript)       | `enum ${1:name} {$2}$0`       |\n|  `enc` | const enum (TypeScript) | `const enum ${1:name} {$2}$0` |\n|  `mod` | module (TypeScript)     | `module ${1:name} {$2}$0`     |\n|  `nam` | namespace (TypeScript)  | `namespace ${1:name} {$2}$0`  |\n\n\u003e Only in `typescript` and `typescriptreact` file type.\n","funding_links":[],"categories":["javascript","typescript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ft7yang%2Fvscode-hyper-javascript-snippets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ft7yang%2Fvscode-hyper-javascript-snippets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ft7yang%2Fvscode-hyper-javascript-snippets/lists"}