Code snippets are templates that make it easier to enter repeating code patterns, such as loops or conditional-statements.
对于重复性代码片段的输入,使用Snippet可以很大程度上提高开发效率。VSCode 内置了常见的Snippet,此外支持用户自定义 Snippets,可以为不同的编程语言创建特定的代码片段。
个人常用片段包括:
global
: 时间戳,email etc.markdown
: 一些html code, callout, math, tabs 等Ctrl+Shift+P
)Ref: https://macromates.com/manual/en/snippets
"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 IntelliSenseCommon 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个人积累了一些常用的 Snippets,托管在 dotfiles/application/vscode/snippets at main · Efterklang/dotfiles
{ "timestamp": { "scope": "", "prefix": "timestamp", "body": [ "${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}" ], "description": "Inserts a timestamp" },}
一些hexo, icarus, html snippets
{ "Markdown Callout": { "prefix": "callout", "body": [ "> [!${1|info,todo,success,check,done,warning,caution,attention,question,help,faq,danger,error,bug,failure,fail,missing,tip,hint,important,example,abstract,summary,tldr,quote,cite|}] ${2:message}" ], "description": "Create a callout block with different types: NOTE, TIP etc." }, "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*}", "$$"] }}
Snippets in Visual Studio Code
Snippets in Visual Studio Code