t7yang/vscode-hyper-javascript-snippetsPublic

NotificationsYou must be signed in to change notification settings
Fork0
Star17

Visual Studio Code snippet extension for JavaScript and TypeScript

License

MIT license

17 stars 0 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 99 Commits
.vscode		.vscode
images		images
src		src
.gitignore		.gitignore
.prettierignore		.prettierignore
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
package.json		package.json
tsconfig.json		tsconfig.json
yarn.lock		yarn.lock

Repository files navigation

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 MarketplaceHyper JavaScript Snippets.

Advantages

Easy Learn - related snippets shared a same namespace or pattern, like everyfor loop prefix start withfo, 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

UsePrettier to help you formating your code.
Disable built-in snippets withControl Snippets or hiding with built-in commandInsert 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 offeditor.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 everyfor loop snippets prefix are start withfo, 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 intypescript andtypescriptreact file type.

About

Visual Studio Code snippet extension for JavaScript and TypeScript

Releases

10tags

Packages

No packages published

Languages

TypeScript100.0%

Movatterモバイル変換

License

t7yang/vscode-hyper-javascript-snippets

Folders and files

Latest commit

History

Repository files navigation

Hyper JavaScript Snippets (Visual Studio Code)

Introduction

Advantages

Suggestions

Known issues

FAQ

Declarations

Conditional

Statement

Functions

Iterables

Objects

Classes

Types

Promises

ES2015 Modules

Node.js

Console

Timers

Miscellaneous

TypeScript (Data Types)

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages0

Uh oh!

Languages

Packages