Snippets in Visual Studio Code

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

  1. Open the Command Palette (Ctrl+Shift+P)
  2. Type “Snippets” and select “Configure User Snippets”
  3. Choose from:
    • New Global Snippets file
    • New Snippets file for specific language
    • Existing snippets file

Snippet Syntax

Ref: https://macromates.com/manual/en/snippets

JSON
"Print to console": {    "prefix": "log",    "body": [        "console.log('$1');",        "$2"    ],    "description": "Log output to console"}

Key components:

  • prefix: The trigger text for the snippet
  • body: The actual template content
  • description: 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

My Snippets

个人积累了一些常用的 Snippets,托管在 dotfiles/application/vscode/snippets at main · Efterklang/dotfiles

global.code-snippets

JSON
{    "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

JSON
{    "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*}", "$$"]    }}

Ref

Snippets in Visual Studio Code

Snippets in Visual Studio Code

https://vluv.space/vscode_snippets/

作者

GnixAij

发布于

2025-04-09

更新于

2025-08-12

许可协议

评论