Humane JS SnippetsPreviewDescriptive, easy to find JavaScript snippets. Installation Launch VS Code Quick Open ( Ctrl+P), paste the following command, and press enter.Copied to clipboard |
|
| 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 |
FAQ
1) Where are the builtin JavaScripts?
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.
2) How do you get snippets to be shown at the top of the suggetion list?
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.
3) How do I use the snippets?
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.
4) How do I add shortcuts for the snippets?
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.
5) Where can I learn more about snippets?
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! 😉
Image Attribution
Logo inspired by Brain by Nithinan Tatah from the Noun Project.