All vscode Snippets

caution

To use a Snippet, press Ctrl + Space, type the first (or any other) letters of the required snippet prefix and select the appropriate command from the pop-up context menu.

Snippets List

	Snippet Prefix	Usage	Description	Result
1	Anchor-from-Clipboard	arc	Anchor to a link from the clipboard (Copy link > activate snippet)	habr.com
2	Anchor-from-Clipboard2	arc2	see 1 + add highlighted text between <a> tags	quiz
3	Anchor-from-Clipboard3	arc3	see 1 -> <a>link: highlighted text</a>	habr.com: quiz
3	Anchor-from-Clipboard4	arc4	see 1 -> <a>highlighted text (link)</a>	quiz (habr.com)
4	Tabs-from-Clipboard	tabs	type two keywords with one space between them: JSX React > cut this text > activate snippet	see here or React Complete Guide: 3.12 Working with Props
5	import React		Print first import line	import React from 'react'
6	full React component	Automatically names a React component with a file name	Print the entire blank of a React component	see Full React Component below
7	Comment block	se	Insert depending on language comment block	see Comment Block below
8	Print to console	console		"console.log('$1');" + next line "$2"
9	Print ReactDOM container	container
10	Import React	Import React		import React from 'react'
11	functional React component	func React component
11	functional React component2	func React component2
13	classes css	classes css		className={classes.$1}$0
14	axios import	axios import		import axios from 'axios'
15	classes import	classes import		import classes from './$1.module.css'$0
16	prettier_ignore	pri		<!-- prettier-ignore -->
17	prettier_ignore comment	prc		<!-- prettier-ignore-start --> $SELECTED_TEXT <!-- prettier-ignore-end -->
18	Auto Frontmatter	Docusaurus-id
19	Clickable image	Select Header (words only), press Ctrl + Space, select 'Clickable image' in the menu without entering any text	-> clickable md image will be below	with [](.png) pattern
20	Insert Code Block	code_shell	Add md code block with shell type	```shell ```

Keyboard Shortcuts

Some snippets (with shortcuts) are located on the keyboard shortcuts page.

Snippets Results

full React component

Snippet with three tabstops using the filename.

import React from 'react'

const userOutput = () => {return ()}

export default userOutput

• Automatically names a React component with a file name
• Print the entire blank of a React component
• 3 tabs stops:
  • 1: if you want to rename a component
  • 2: if you want to remove the return keyword
  • 3: if you want to add JSX code

Comment block

Snippet with 2 vars. Source: stackoverflow.com: VS-Code Variables In Custom Snippet

<!-- First start -->
Second
<!--First end -->

Working with Snippets

Using a Snippet

For example, to activate Anchor-from-Clipboard snippet, you type arc, press Ctrl + Space and choose Anchor-from-Clipboard from context menu (for this snippet to work correctly, you first need to copy the embed link).

How to Make a Snippet

Anchor from Clipboard

Source

• Snippet plus Shortcut
• Snippets in VS Code