This extension is published for education purposes, in support of the article - VS Code - How to write great snippets that anyone can use. It is not open for changes.
Most snippet collections resemble bash aliases. You have a list of nonsense abbreviations such as: "imp", "clg", "fre". You must learn these to use them. 🤕
There is a better way!
Snippets are not confined to using a single word as the trigger (prefix), quick suggestions offered by VS Code are produced from a fuzzy substring search on the prefix. This means we can use spaces in prefixes, and be more descriptive to make our snippets easier to discover.
For example, you want to find an array function, but you're not sure which to use. Just type "arr" and you get a list of array functions with descriptions:
In future, you know you want to use the filter function, just type "filt" or some variation, and you will get that as the first suggestion. 🔥
These snippets are available for the follow language identifiers:
javascriptjavascriptreacttypescriptvuesvelte
You can install the Snippets Ranger extension to view the full list of snippets inside VS Code.
I didn't repeat any of the builtin JavaScript snippets (see FAQ section for more info on builtin snippets).
| Prefix | Description | Body |
|---|---|---|
| array concat | Joins two or more arrays, and returns a copy of the joined arrays | let ${1:newArray} = ${2:array1}.concat(${3:array2}); $0 |
| array copyWithin | Copies array elements within the array, to and from specified positions. Syntax: array.copyWithin(target, start, end). | ${1:array}.copyWithin(${2:target}, ${3:start}, ${4:end}); $0 |
| array every | Checks if every element in an array pass a test. | let ${1:boolean} = ${2:array}.every((${3:item}) => { $4 }); $0 |
| array fill | Fill the elements in an array with a static value. | ${1:array}.fill(${2:target}, ${3:start}, ${4:end}); $0 |
| array filter | Creates a new array with every element in an array that pass a test | let ${1:newArray} = ${2:array}.filter((${3:item}) => { $4 }); $0 |
| array find | Returns the value of the first element in an array that pass a test. | let ${1:result} = ${2:array}.find((${3:item}) => { $4 }); $0 |
| array findIndex | Returns the index of the first element in an array that pass a test | let ${1:result} = ${2:array}.findIndex((${3:item}) => { $4 }); $0 |
| array includes | Check if an array contains the specified element. It is case sensitive. | let ${1:boolean} = ${2:array}.includes(${3:element}, ${4:start}); $0 |
| array indexOf | Search the array for an element and return its position. | let ${1:index} = ${2:array}.indexOf(${3:item}, ${4:start}); $0 |
| array map | Creates a new array populated with the results of calling the provided function on every element in the array. | let ${1:newArray} = ${2:array}.map((${3:item}) => { $4 }); $0 |
| array push | Add new items to the end of an array. | ${1:array}.push(${2:items}); $0 |
| array reduce | Reduce the values of an array to a single value (going left-to-right). | let ${1:newValue} = ${2:array}.reduce((sum, currentValue) => { $4 }); $0 |
| array reduceRight | Reduce the values of an array to a single value (going left-to-right). | let ${1:newValue} = ${2:array}.reduceRight((sum, currentValue) => { $4 }); $0 |
| array slice | Selects a part of an array, and returns the new array. | let ${1:newArray} = ${2:array}.slice(${3:start}, ${4:end}); ${0} |
| array some | Checks if any of the elements in an array pass a test. | let ${1:result} = ${2:array}.some((${3:item}) => { $4 }); ${0} |
| array splice | Adds/Removes elements from an array. | ${1:array}.splice(${3:index}, ${4:howManyToRemove}, ${5:newItems}); ${0} |
| array unshift | Adds new elements to the beginning of an array, and returns the new length. | ${1:array}.unshift(${3:items}); ${0} |
| array destructure | Assign values from array elements to new variables using destructuring. | const [${1:variables}] = ${2:arrayName}; $0 |
| json parse | Parses a JSON string and returns a JavaScript object | let ${1:obj} = JSON.parse(${2:string}); $0 |
| json stringify | Convert a JavaScript object to a JSON string. | let ${1:string} = JSON.stringify(${2:obj}); $0 |
There is a set of snippets for the JavaScript installed with VS Code as part of the built-in JavaScript extension. This is the source file.
You can see these inside VS Code by:
- By opening a JavaScript file and running the commmand
Insert Snippet, which gives a list of the snippets in the dropdown. - The Snippets Ranger extension will show you the built-in snippets organised into groups in a good-looking webview.
Snippets are mixed in with other suggestions, and by default they are placed towards the end of the list. To promote suggestions to the top of the list, you can set editor.snippetSuggestions": "top" in your settings.json.
To insert a snippet, you can just type one of the prefixes in a JavaScript file, and you will be offered a completion suggestion. The setting Editor: Snippet Suggestions controls whether snippets are shown with other suggestions and how they are sorted. By default, they are shown inline.
Alternatively, you can open the Command Palette (Ctrl+Shift+P) and run the command "Insert Snippet", which presents you with a list to choose from.
Run the command Preferences: Open Settings (UI) to open the keyboard shortcuts config. Add an new object to the array such as this:
[ { "key": "ctrl+t", "mac": "cmd+t", "command": "editor.action.insertSnippet", "when": "!editorReadonly && editorLangId == javascript", "args": { "langId": "javascript", "name": "arrow function" } } ]The args.name property must exactly match the snippet name.
You can read my comprehensive guide on Snippets on FreeCodeCamp: Visual Studio Code Snippets – the Definitive VS Code Snippet Guide for Beginners. It's not just for beginners! 😉
Logo inspired by Brain by Nithinan Tatah from the Noun Project.
