JavaScript and TypeScript Snippets

This extension contains keyword snippets and micro patterns for JavaScript, TypeScript and JSON.

What's new in JavaScript and TypeScript Snippets 0.22.0

• Added using and await using.
• Added Symbol.dispose and Symbol.asyncDispose.
• Added ${clipboard} and ${selection} for keyboard shortcut usage.
• Eliminated duplicated prefixes with value selection.
• Removed primitive types for functions, getters, setters, methods and types.
• Removed typeof value !== ....

Index

1. Introduction
2. Shortcut rules for JavaScript
3. Shortcut rules for TypeScript
4. Recommended Settings
5. Recommended Keyboard Shortcuts
6. Recommended Extensions

Introduction

The idea of those snippets is to create a workflow with micro patterns. Write one to five characters and you get the keyword or pattern.

Some prefixes are twice, because the rules are matching different patterns like s_ -> set NAME () { ... } and static NAME () { ... }. Then you have to pick the right one.

The following prefixes are just examples to explain the rules. To see the complete list, please visit SNIPPETS.md. If a keyword or pattern might be missing, please open an issue on Github and make a suggestion.

Shortcut rules for JavaScript

1. The first letter of a word or the upper case in camel or pascal case defines the prefix.

Prefix	Snippet
a	await
f	false
t	true

2. An underscore "_" defines a brace scope.

Prefix	Snippet
_	NAME () { ... }
i_	if (...) { ... }
f_	function NAME (...) { ... }
af_	async function NAME (...) { ... }
d_w	do { ... } while (...);

3. A dollar sign "$" at the end defines a function call.

Prefix	Snippet
cl$	console.log();
Jp$	JSON.parse();

4. The number "1" at the end defines a one line snippet.

Prefix	Snippet
i1	if (CONDITION) ...;
c1	const NAME = VALUE;
l1	let NAME = VALUE;

5. A dollar sign "$" at the start defines an arrow function.

Prefix	Snippet
$_	() => { ... }
$1	() =>

Shortcut rules for TypeScript

1. All JavaScript snippets and prefix rules described above are working in TypeScript, too.

Prefix	Snippet
n_	namespace NAME { ... }
i_	interface NAME { ... }
ie_	interface NAME extends NAME { ... }
t1	type NAME = TYPE;
t_	type NAME = { ... };

2. An underscore "_" at the start defines a private member or a mapped type.

Prefix	Snippet
__	private NAME () { ... }
_a1	private NAME:any = null;
_b_	private NAME () :boolean { ... };
_ik	{ [K in keyof T]: ... };

Recommended Settings

It is recommended to set the snippet suggestions to top.

It is recommended to disable auto intellisense for snippet.

"editor.suggest.snippetsPreventQuickSuggestions": true

It is also recommended to hide the built-in JavaScript and TypeScript snippets.

1. Open a JavaScript file

2. Open command palette

3. Run Snippets: Insert Snippets

4. Hide all JavaScript Language Basics snippets from Intellisense

5. Open a TypeScript file

6. Open command palette

7. Run Snippets: Insert Snippets

8. Hide all Typercript Language Basics snippets from Intellisense

Recommended Keyboard Shortcuts

Please have the following keyboard shortcuts always in mind, because these are fundamental to get the most out of it. Every tab stop is used only if necessary, because it prevents VS Code to open the IntelliSense menu automatically. So sometimes DownArrow or Cmd/Ctrl + Enter can have the same effect.

macOS

• Tab - Jump to the next tab stop of the snippet.
• DownArrow - Move the caret down one line.
• Cmd + Enter - Insert line below, even if the caret is in the middle of a line.
• Cmd + Shift + Enter - Insert line above, even if the caret is in the middle of a line.

Windows / Linux

• Tab - Jump to the next tab stop of the snippet.
• DownArrow - Move the caret down one line.
• Ctrl + Enter - Insert line below, even if the caret is in the middle of a line.
• Ctrl + Shift + Enter - Insert line above, even if the caret is in the middle of a line.

Quick Template Literals Expression

The following keyboard shortcut improves the writing of an expression in template literals.

macOS

[
	{
		"key": "cmd+-",
		"command": "editor.action.insertSnippet",
		"when": "editorTextFocus && !editorReadonly && editorLangId =~ /(java|type)script(react)?/",
		"args": { "name": "${selection}" }
	},
	{
		"key": "alt+cmd+-",
		"command": "editor.action.insertSnippet",
		"when": "editorTextFocus && !editorReadonly && editorLangId =~ /(java|type)script(react)?/",
		"args": { "name": "${clipboard}" }
	}
]

Windows and Linux

[
	{
		"key": "ctrl+-",
		"command": "editor.action.insertSnippet",
		"when": "editorTextFocus && !editorReadonly && editorLangId =~ /(java|type)script(react)?/",
		"args": { "name": "${selection}" }
	},
	{
		"key": "alt+ctrl+-",
		"command": "editor.action.insertSnippet",
		"when": "editorTextFocus && !editorReadonly && editorLangId =~ /(java|type)script(react)?/",
		"args": { "name": "${clipboard}" }
	}
]

Recommended Extensions

• Swap Keywords
• Extension Pack