Skip to main content

VSC 代码片段介绍

· 5 min read
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 
    }
}

示例​

比如以下代码片段:

.vscode/ts-function.code-snippets
{
  "TS Function": {
    "prefix": "ts-function",
    "body": [
      "export type ${TM_FILENAME_BASE/^(\\w)(.*)/${1:/upcase}${2}/}Params = {}",
      "export interface ${TM_FILENAME_BASE/^(\\w)(.*)/${1:/upcase}${2}/}Result { }",
      " ",
      "/**",
      " * ",
      " * @author ${1:创建人} ",
      " * @date $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
      " */",
      "export function ${TM_FILENAME_BASE}(params: ${TM_FILENAME_BASE/^(\\w)(.*)/${1:/upcase}${2}/}Params): ${TM_FILENAME_BASE/^(\\w)(.*)/${1:/upcase}${2}/}Result {",
      "}",
    ],
    "description": "创建 TypeScript 函数"
  }
}

当文件名为 getRandom.ts 文件输入 ts-function 按回车会生成以下代码:

getRandom.ts
export type GetRandomParams = {}
export interface GetRandomResult { }
 
/**
 * 
 * @author 创建人 
 * @date 2021-11-23
 */
export function getRandom(params: GetRandomParams): GetRandomResult {
}

原文 - Snippets in Visual Studio Code