Humane JS Snippets

Descriptive, easy to find JavaScript snippets.

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. 🔥

Activation

These snippets are available for the follow language identifiers:

• javascript
• javascriptreact
• typescript
• vue
• svelte

Snippets

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

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:

1. By opening a JavaScript file and running the commmand Insert Snippet, which gives a list of the snippets in the dropdown.
2. 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.