Hyper JavaScript Snippets (Visual Studio Code)
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
- Easy Learn - related snippets shared a same namespace or pattern, like every
for loop prefix start with fo, all assignment snippet share *a pattern.
- 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.
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) {
case $2 : $3
default: $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) {
if ($2.hasOwnProperty($1)) {
$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) |
export $0 |
expd |
export default (ES2015) |
export default $0 |
expas |
export as (ES2015) |
export { $1 as $2 };$0 |
expf |
export from (ES2015) |
export ${2:name} from '$1';$0 |
expaf |
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.
👋 My Contacts:
Made with ❤️ by Estevam Souza
Contributors
| |
