Skip to content

Latest commit

 

History

History
206 lines (181 loc) · 14.8 KB

README.md

File metadata and controls

206 lines (181 loc) · 14.8 KB
Raw

Hyper JavaScript Snippets (Visual Studio Code)

Version Downloads Rating

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

  1. Easy Learn - related snippets shared a same namespace or pattern, like every for loop prefix start with fo, all assignment snippet share *a pattern.
  2. Composable - No semicolon (point-free friendly), no newline, no placeholder, small snippet, the very end tabstop as possible, make composing snippets friendly.
  3. 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
exp export (ES2015) deprecated: export $0
expd export default (ES2015) deprecated: export default $0
expas export as (ES2015) deprecated: export { $1 as $2 };$0
expf export from (ES2015) deprecated: export ${2:name} from '$1';$0
expaf export all from (ES2015) deprecated: export *$2 from '$1';$0
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
imu 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
impas import module as (ES2015) import ${2:*} as ${3:name} from '$1'$3;$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

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.