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.20.0
- Added brace scope for cases
case '': { ... break; }.
- Added type import
import type { ... } from '...'.
Index
- Introduction
- Shortcut rules for JavaScript
- Shortcut rules for TypeScript
- Recommended Settings
- Recommended Keyboard Shortcuts
- 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. Variable declarations, properties and methods are available with primitive types and accessors, too.
| Prefix |
Snippet |
cb1 |
const NAME:boolean = false; |
pb1 |
public NAME:boolean = false; |
pgn_ |
public get NAME () :number { ... } |
pso_ |
public static NAME () :object { ... } |
3. An underscore "_" at the start defines a private member.
| Prefix |
Snippet |
__ |
private NAME () { ... } |
_a1 |
private NAME:any = null; |
_b_ |
private NAME () :boolean { ... }; |
Recommended Settings
It is recommended to set the snippet suggestions to top.
"editor.snippetSuggestions": "top",
It is also recommended to disable the built-in JavaScript Snippets with the following extension.
Built-In Extensions
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.
Recommended Extensions
