VSC 代码片段介绍

Alan

Alan

Maintainer of blog

简介#

在VSC里, 代码片段和其他提示混合出现在智能感知中(Windows: Ctrl + Space, Mac: Cmd + Space), 也可以使用通过 Cmd/Ctrl + Shift + P > Insert Snippet 手动选择指定的代码片段, 同时支持使用tab完成代码片段插入: 使用配置"editor.tabCompletion": "on"开启, 输入代码片段的前缀(prefix), 然后按下 Tab 按键即可.

创建自己的代码片段#

选择 File/Code > Preferences > User Snippets, 可以选择创建以下类型的代码片段:

  • 针对特定语言的代码片段 (创建时选择代码片段支持的语言)
  • 针对所有语言的通用代码片段(选择 New Global Snippets file)
  • 针对当前项目的通用代码片段, 在你的项目根目录下的 .vscode 文件夹中创建扩展名为 .json.code-snippets 的文件即可.

示例片段:

{
"For Loop": {
"prefix": ["for", "for-const"],
"body": ["for (const ${2:element} of ${1:array}) {", "\t$0", "}"],
"description": "A for loop."
}
}
  • "For Loop"是代码片段的名称
  • prefix 定义一个或多个触发词, 如果输入的字符包含prefix里定义的前缀, 智能感知列表就会出现这个代码片段以供选择, 除了前缀匹配, 还支持首字母匹配, 如果输入fc, 就会匹配上述示例中的for-const.
  • body 代码片段实际内容, 数组的货会进行多行拼接
  • description 用于在智能感知中提供描述信息, 可选.

普通占位符#

上述示例中的body有三个占位符, ${1:array}, ${2:element}$0, 你可以使用 Tab 按钮在占位符之间来回切换, 冒号后面的文案为占位符的默认文本, 占位符的顺序按照数字顺序, 从0开始.

  • $2 普通占位符, 2 用来指定 Tab 切换时的顺序
  • ${1:default-text} 冒号后面提供默认文本的占位符

多选值#

占位符可以有多个可选值: ${1|one,tow,three}

变量占位符#

占位符支持支持插入一些系统变量, 格式为 $name${name:default} (default用来给占位符提供默认文本), 下面是可以使用的变量:

  • TM_SELECTED_TEXT The currently selected text or the empty string
  • TM_CURRENT_LINE The contents of the current line
  • TM_CURRENT_WORD The contents of the word under cursor or the empty string
  • TM_LINE_INDEX The zero-index based line number
  • TM_LINE_NUMBER The one-index based line number
  • TM_FILENAME The filename of the current document
  • TM_FILENAME_BASE The filename of the current document without its extensions
  • TM_DIRECTORY The directory of the current document
  • TM_FILEPATH The full file path of the current document
  • CLIPBOARD The contents of your clipboard
  • WORKSPACE_NAME The name of the opened workspace or folder
  • WORKSPACE_FOLDER The path of the opened workspace or folder
  • CURRENT_YEAR The current year
  • CURRENT_YEAR_SHORT The current year's last two digits
  • CURRENT_MONTH The month as two digits (example '02')
  • CURRENT_MONTH_NAME The full name of the month (example 'July')
  • CURRENT_MONTH_NAME_SHORT The short name of the month (example 'Jul')
  • CURRENT_DATE The day of the month
  • CURRENT_DAY_NAME The name of day (example 'Monday')
  • CURRENT_DAY_NAME_SHORT The short name of the day (example 'Mon')
  • CURRENT_HOUR The current hour in 24-hour clock format
  • CURRENT_MINUTE The current minute
  • CURRENT_SECOND The current second
  • CURRENT_SECONDS_UNIX The number of seconds since the Unix epoch
  • BLOCK_COMMENT_START Example output: in PHP /* or in HTML <!--
  • BLOCK_COMMENT_END Example output: in PHP */ or in HTML -->
  • LINE_COMMENT Example output: in PHP //

其他#

如果遇到 Markdown 文件没有智能感知方式插入代码片段, 可以在配置中(settings.json)添加一下配置项, 强制开启:

{
"[markdown]": {
"editor.wordWrap": "on",
"editor.quickSuggestions": true
}
}

原文 - Snippets in Visual Studio Code