Snippets in Visual Studio Code
Code snippets are templates that make it easier to enter repeating code patterns, such as loops or conditional-statements.
Intro
对于重复性代码片段的输入，使用Snippet可以很大程度上提高开发效率。VSCode 内置了常见的Snippet，此外支持用户自定义 Snippets，可以为不同的编程语言创建特定的代码片段。
个人常用片段包括：
global: 时间戳，email etc.markdown: 一些html code, callout, math, tabs 等
Creating Snippets
User Snippets
- Open the Command Palette (
Ctrl+Shift+P) - Type “Snippets” and select “Configure User Snippets”
- Choose from:
- New Global Snippets file
- New Snippets file for specific language
- Existing snippets file
Snippet Syntax
Ref: https://macromates.com/manual/en/snippets
1
2
3
4
5
6
7
8
"Print to console": {
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
}Key components:
prefix: The trigger text for the snippetbody: The actual template contentdescription: Helper text shown in IntelliSense
Snippet Variables
Common variables you can use:
$1,$2: Tab stops${1:default}: Placeholder with default text$0: Final cursor position$TM_FILENAME: Current file name$CURRENT_YEAR: Current year$CLIPBOARD: Contents of clipboard
Useful Examples
global.code-snippets
1
2
3
4
5
6
7
8
9
10
{
"timestamp": {
"scope": "",
"prefix": "timestamp",
"body": [
"${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}"
],
"description": "Inserts a timestamp"
},
}markdown.json
一些hexo, icarus, html snippets
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
{
"Callout": {
"prefix": "callout",
"body": [
"> [!${1|NOTE,TLDR,IMPORTANT,WARNING,CAUTION|}] ${2:message}"
],
"description": "Create a callout block with different types: NOTE, TLDR, IMPORTANT, WARNING, CAUTION"
},
"anchor": {
"prefix": "anchor",
"body": ["<a href=\"#$1\">$2</a>"]
},
"img": {
"prefix": "img",
"body": ["<img src=\"$1\" alt=\"$2\" style=\"width: 80%\"/>"]
},
"raw": {
"prefix": "raw",
"body": ["{% raw %}", "", "$1", "", "{% endraw %}"]
},
"style": {
"prefix": "style",
"body": ["<style>", "$1 {", "", "}", "</style>"]
},
"div tag": {
"prefix": "div",
"body": ["<div>", "", "</div>"]
},
"tabs": {
"prefix": "tab",
"body": [
"{% tabs size:big align:fullwidth%}",
"<!-- tab id:$1 title:$2 active -->",
"",
"<!-- endtab -->",
"<!-- tab id:$3 title:$4 -->",
"",
"<!-- endtab -->",
"{% endtabs %}"
]
},
"math": {
"prefix": "math",
"body": ["$$", "\\begin{align*}", "& $1", "\\end{align*}", "$$"]
}
}Ref
Snippets in Visual Studio Code