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.
- Easy Learn - related snippets shared a same namespace or pattern, like every
forloop prefix start withfo, all assignment snippet share*apattern. - Composable - No semicolon (point-free friendly), no newline, no placeholder, small snippet, the very end tabstop as possible, make composing snippets friendly.
- Avoid conflict - Try to avoid snippet's prefix conflict with variable name and built-in snippet's prefix.
- 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,.
- 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.snippetsPreventQuickSuggestionshelp 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.
- A space added before
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.
| 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γγ« |
| 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γγ« |
| 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γγ«} |
| 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} |
| Prefix | Desc | Body |
|---|---|---|
seq |
sequence of 0..n | [...Array(${1:length}).keys()]0γγ« |
| Prefix | Desc | Body |
|---|---|---|
ol |
object literal | { 1γγ«: 0γγ« } |
| Prefix | Desc | Body |
|---|---|---|
cs |
class (ES2015) | class ${1:name} { |
cse |
class extends (ES2015) | class ${1:name} extends ${2:base} { |
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γγ«} |
| Prefix | Desc | Body |
|---|---|---|
tof |
typeof | typeof ${1:source} === 0γγ« |
iof |
instanceof | ${1:source} instanceof ${0:Class} |
| 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γγ«> |
| 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) | import0γγ« |
imm |
import.meta (ES2015) | import.meta0γγ« |
imu |
import.meta.url (ES2015) | import.meta.url0γγ« |
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γγ« |
| 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γγ« |
| 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γγ«) |
clgc |
console.groupCollapsed | console.groupCollapsed(1γγ«) |
cli |
console.info | console.info(1γγ«)0γγ« |
cltb |
console.table | console.table(1γγ«)0γγ« |
clt |
console.time | console.time('1γγ«') |
cltl |
console.timeLog | console.timeLog(1γγ«)0γγ« |
cltr |
console.trace | console.trace(1γγ«)0γγ« |
clw |
console.warn | console.warn(1γγ«)0γγ« |
| 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γγ« |
| Prefix | Desc | Body |
|---|---|---|
us |
insert 'use strict' statement | 'use strict'; |
| 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
typescriptandtypescriptreactfile type.