探索智能体开发 -

Visual Studio Code 中的代码片段 (Snippets)

代码片段（Snippets）是模板，可以更轻松地输入重复的代码模式，例如循环或条件语句。

在 Visual Studio Code 中，代码片段会出现在 IntelliSense (⌃Space (Windows, Linux Ctrl+Space)) 中并与其他建议混合在一起，也会出现在专门的代码片段选择器中（命令面板中的插入代码片段）。VS Code 还支持制表符补全：通过 "editor.tabCompletion": "on" 启用它，输入代码片段前缀（触发文本），然后按 Tab 键即可插入代码片段。

代码片段语法遵循 TextMate 代码片段语法，但“插值 shell 代码”和 \u 的使用除外；这两者均不受支持。

ajax snippet

内置代码片段

VS Code 为多种语言提供了内置代码片段，例如：JavaScript、TypeScript、Markdown 和 PHP。

builtin javascript snippet

您可以通过在命令面板中运行插入代码片段命令来查看当前语言可用的代码片段列表。请记住，此列表还包括您定义的自定义代码片段以及您安装的扩展所提供的任何代码片段。

从扩展商店安装代码片段

VS Code 扩展商店中的许多扩展都包含代码片段。您可以在扩展视图 (⇧⌘X (Windows, Linux Ctrl+Shift+X)) 中使用 @category:"snippets" 过滤器来搜索包含代码片段的扩展。

Searching for extensions with snippets

如果您找到想要使用的扩展，请安装它，然后重启 VS Code，新代码片段即可使用。

创建自定义代码片段

无需任何扩展，您即可轻松定义自己的代码片段。要创建或编辑自己的代码片段，请在 文件 > 首选项 下选择配置用户代码片段，然后选择代码片段适用的语言（通过语言标识符），或者选择新建全局代码片段文件（如果希望它们适用于所有语言）。VS Code 会为您管理底层代码片段文件的创建和刷新。

snippet dropdown

代码片段文件采用 JSON 格式编写，支持 C 风格注释，并可定义无限数量的代码片段。代码片段支持大多数用于动态行为的 TextMate 语法，能根据插入上下文智能格式化空白字符，并允许轻松进行多行编辑。

以下是 JavaScript 的 for 循环代码片段示例

// in file 'Code/User/snippets/javascript.json'
{
  "For Loop": {
    "prefix": ["for", "for-const"],
    "body": ["for (const ${2:element} of ${1:array}) {", "\t$0", "}"],
    "description": "A for loop."
  }
}

在上面的示例中

  • "For Loop" 是代码片段名称。如果未提供 description，它将通过 IntelliSense 显示。
  • prefix 定义了一个或多个触发词，用于在 IntelliSense 中显示代码片段。前缀执行的是子字符串匹配，因此在这种情况下，“fc”可以匹配“for-const”。
  • body 是一行或多行内容，插入时会合并为多行。换行符和嵌入的制表符将根据插入代码片段的上下文进行格式化。
  • description 是代码片段的可选描述，由 IntelliSense 显示。

此外，上述示例的 body 包含三个占位符（按遍历顺序列出）：${1:array}、${2:element} 和 $0。您可以使用 Tab 快速跳转到下一个占位符，此时您可以编辑该占位符或跳转到下一个。冒号 : 后面的字符串（如果有）是默认文本，例如 ${2:element} 中的 element。占位符遍历顺序按数字升序，从 1 开始；0 是一个可选的特殊情况，始终排在最后，并在指定位置退出代码片段模式。

文件模板代码片段

如果代码片段旨在填充或替换文件内容，您可以在代码片段定义中添加 isFileTemplate 属性。当您在新建或现有文件中运行代码片段：使用代码片段填充文件命令时，文件模板代码片段会显示在下拉菜单中。

代码片段作用域

代码片段具有作用域，因此只会建议相关的代码片段。代码片段的作用域可以基于：

  1. 代码片段适用的语言（可能是全部）
  2. 代码片段适用的项目（通常是全部）

语言代码片段作用域

每个代码片段都会根据其定义位置，被限定于一种、多种或所有（“全局”）语言：

  1. 语言代码片段文件
  2. 全局代码片段文件

单语言用户定义代码片段是在特定语言的代码片段文件（例如 javascript.json）中定义的，您可以通过代码片段：配置用户代码片段并选择相应语言标识符来访问它。代码片段仅在编辑该定义语言的文件时可用。

多语言和全局用户定义代码片段都定义在“全局”代码片段文件中（后缀为 .code-snippets 的 JSON 文件），同样可以通过代码片段：配置用户代码片段访问。在全局代码片段文件中，代码片段定义可以包含一个额外的 scope 属性，该属性接受一个或多个语言标识符，这使得该代码片段仅对指定的语言可用。如果未提供 scope 属性，则全局代码片段在所有语言中均可用。

大多数用户定义代码片段的作用域仅限单语言，因此它们通常定义在特定语言的代码片段文件中。

项目代码片段作用域

您还可以拥有一个作用域限制在当前项目的全局代码片段文件（后缀为 .code-snippets 的 JSON 文件）。项目文件夹代码片段通过代码片段：配置用户代码片段下拉菜单中的为 '<folder-name>' 新建代码片段文件...选项创建，并位于项目根目录的 .vscode 文件夹中。项目代码片段文件对于与在该项目中工作的所有用户共享代码片段非常有用。项目文件夹代码片段类似于全局代码片段，也可以通过 scope 属性限定于特定语言。

文件模式作用域

您还可以使用可选的 include 和 exclude 属性指定文件模式，从而进一步控制代码片段何时出现。这些属性适用于特定语言和全局代码片段文件，并且可以与 scope 属性结合使用，从而更精确地控制代码片段建议。

  • include - 一个 glob 模式或 glob 模式数组，指定代码片段应在哪些文件中出现。
  • exclude - 一个 glob 模式或 glob 模式数组，指定代码片段不应在哪些文件中出现。

模式匹配的工作方式如下：

  • 仅文件名模式（例如 *.test.ts）基于文件名进行匹配，无论文件在项目中的位置如何。
  • 基于路径的模式（例如 **/*.test.ts 或 **/dist/**）针对完整文件路径进行匹配。
  • 如果文件同时匹配 include 和 exclude 模式，则 exclude 模式优先。
  • 如果未指定这两个属性，代码片段将根据 scope 属性在所有适用文件中显示。
示例

示例：测试代码片段

此代码片段仅出现在 TypeScript 测试文件中

{
  "Test Block": {
    "prefix": "test",
    "body": ["test('${1:description}', () => {", "\t${0}", "});"],
    "description": "Insert a test block",
    "scope": "typescript",
    "include": ["**/*.test.ts", "**/*.spec.ts"]
  }
}

示例：排除目录

此代码片段出现在所有 JavaScript 文件中，但 dist 或 node_modules 目录中的除外

{
  "Console Log": {
    "prefix": "log",
    "body": "console.log(${0});",
    "description": "Insert console.log",
    "scope": "javascript",
    "exclude": ["**/dist/**", "**/node_modules/**"]
  }
}

示例：配置文件代码片段

此代码片段仅出现在 travis.yml 文件中，使用仅文件名模式

{
  "Travis CI Node": {
    "prefix": "travis-node",
    "body": ["language: node_js", "node_js:", "  - ${1:18}"],
    "description": "Travis CI Node.js configuration",
    "scope": "yaml",
    "include": ["travis.yml"]
  }
}

使用 include 和 exclude 模式有助于通过仅在相关位置显示代码片段来减少 IntelliSense 中的杂乱。

代码片段语法

代码片段的 body 可以使用特殊构造来控制光标和插入的文本。支持的功能及其语法如下：

制表符停止 (Tabstops)

使用制表符停止，您可以让编辑器光标在代码片段内移动。使用 $1, $2 指定光标位置。数字代表访问制表符停止的顺序，而 $0 表示最终光标位置。相同制表符停止的多个出现会被链接并同步更新。

占位符 (Placeholders)

占位符是带有值的制表符停止，例如 ${1:foo}。占位符文本将被插入并选中，以便轻松更改。占位符可以嵌套，例如 ${1:another ${2:placeholder}}。

选择 (Choice)

占位符可以拥有选择作为值。语法是用管道符包围的逗号分隔值枚举，例如 ${1|one,two,three|}。当插入代码片段并选中该占位符时，选择功能会提示用户从中挑选一个值。

变量

使用 $name 或 ${name:default}，您可以插入变量的值。当变量未设置时，插入其默认值或空字符串。当变量未知（即其名称未定义）时，将插入变量名称并将其转换为占位符。

可以使用以下变量：

  • TM_SELECTED_TEXT 当前选中的文本或空字符串
  • TM_CURRENT_LINE 当前行的内容
  • TM_CURRENT_WORD 光标下的单词内容或空字符串
  • TM_LINE_INDEX 基于 0 索引的行号
  • TM_LINE_NUMBER 基于 1 索引的行号
  • TM_FILENAME 当前文档的文件名
  • TM_FILENAME_BASE 当前文档的文件名（不含扩展名）
  • TM_DIRECTORY 当前文档的目录
  • TM_FILEPATH 当前文档的完整文件路径
  • RELATIVE_FILEPATH 当前文档相对于打开的工作区或文件夹的路径
  • CLIPBOARD 剪贴板的内容
  • WORKSPACE_NAME 打开的工作区或文件夹名称
  • WORKSPACE_FOLDER 打开的工作区或文件夹路径
  • CURSOR_INDEX 基于 0 索引的光标编号
  • CURSOR_NUMBER 基于 1 索引的光标编号

用于插入当前日期和时间

  • CURRENT_YEAR 当前年份
  • CURRENT_YEAR_SHORT 当前年份的最后两位数字
  • CURRENT_MONTH 月份（两位数字，例如 '02'）
  • CURRENT_MONTH_NAME 月份全称（例如 'July'）
  • CURRENT_MONTH_NAME_SHORT 月份简写（例如 'Jul'）
  • CURRENT_DATE 月份中的日期（两位数字，例如 '08'）
  • CURRENT_DAY_NAME 星期名称（例如 'Monday'）
  • CURRENT_DAY_NAME_SHORT 星期简写（例如 'Mon'）
  • CURRENT_HOUR 24 小时制当前小时
  • CURRENT_MINUTE 当前分钟（两位数字）
  • CURRENT_SECOND 当前秒数（两位数字）
  • CURRENT_SECONDS_UNIX 自 Unix 纪元以来的秒数
  • CURRENT_TIMEZONE_OFFSET 当前 UTC 时区偏移量，格式为 +HH:MM 或 -HH:MM（例如 -07:00）。

用于插入随机值

  • RANDOM 6 位随机十进制数字
  • RANDOM_HEX 6 位随机十六进制数字
  • UUID 版本 4 UUID

用于插入行注释或块注释，遵循当前语言

  • BLOCK_COMMENT_START 输出示例：PHP 中为 /* 或 HTML 中为 <!--
  • BLOCK_COMMENT_END 输出示例：PHP 中为 */ 或 HTML 中为 -->
  • LINE_COMMENT 输出示例：PHP 中为 //

以下代码片段在 JavaScript 文件中插入 /* Hello World */，在 HTML 文件中插入 <!-- Hello World -->

{
  "hello": {
    "scope": "javascript,html",
    "prefix": "hello",
    "body": "$BLOCK_COMMENT_START Hello World $BLOCK_COMMENT_END"
  }
}

变量转换 (Variable transforms)

转换允许您在插入变量之前修改其值。转换的定义由三个部分组成：

  1. 一个正则表达式，用于匹配变量的值；若变量无法解析，则匹配空字符串。
  2. 一个“格式字符串”，允许引用正则表达式中的匹配组。格式字符串允许进行条件插入和简单修改。
  3. 传递给正则表达式的选项。

以下示例插入当前文件名但不包含扩展名，例如将 foo.txt 变为 foo。 

${TM_FILENAME/(.*)\\..+$/$1/}
  |           |         |  |
  |           |         |  |-> no options
  |           |         |
  |           |         |-> references the contents of the first
  |           |             capture group
  |           |
  |           |-> regex to capture everything before
  |               the final `.suffix`
  |
  |-> resolves to the filename

占位符转换 (Placeholder-Transform)

与变量转换一样，占位符的转换允许在移动到下一个制表符停止位时更改为占位符插入的文本。插入的文本与正则表达式匹配，并且根据选项，匹配项会被替换为指定的替换格式文本。每个占位符的出现都可以使用第一个占位符的值独立定义其自己的转换。占位符转换的格式与变量转换相同。

转换示例

示例显示在双引号内（就像它们出现在代码片段体中一样），以说明对某些字符进行双重转义的必要性。以下是针对文件名 example-123.456-TEST.js 的转换示例及其结果。

示例 输出 解释
"${TM_FILENAME/[\\.]/_/}" example-123_456-TEST.js 将第一个 . 替换为 _
"${TM_FILENAME/[\\.-]/_/g}" example_123_456_TEST_js 将每个 . 或 - 替换为 _
"${TM_FILENAME/(.*)/${1:/upcase}/}" EXAMPLE-123.456-TEST.JS 更改为全部大写
"${TM_FILENAME/[^0-9a-z]//gi}" example123456TESTjs 移除所有非字母数字字符

语法

以下是代码片段的 EBNF（扩展巴科斯范式）。使用 \（反斜杠），您可以转义 $, } 和 \。在选择元素内，反斜杠还可以转义逗号和管道字符。只有需要转义的字符才能被转义，因此 $ 不应在这些构造内被转义，且 $ 或 } 也不应在选择构造内被转义。

any         ::= tabstop | placeholder | choice | variable | text
tabstop     ::= '$' int
                | '${' int '}'
                | '${' int  transform '}'
placeholder ::= '${' int ':' any '}'
choice      ::= '${' int '|' text (',' text)* '|}'
variable    ::= '$' var | '${' var '}'
                | '${' var ':' any '}'
                | '${' var transform '}'
transform   ::= '/' regex '/' (format | text)+ '/' options
format      ::= '$' int | '${' int '}'
                | '${' int ':' '/upcase' | '/downcase' | '/capitalize' | '/camelcase' | '/pascalcase' | '/snakecase' | '/kebabcase' '}'
                | '${' int ':+' if '}'
                | '${' int ':?' if ':' else '}'
                | '${' int ':-' else '}' | '${' int ':' else '}'
regex       ::= JavaScript Regular Expression value (ctor-string)
options     ::= JavaScript Regular Expression option (ctor-options)
var         ::= [_a-zA-Z] [_a-zA-Z0-9]*
int         ::= [0-9]+
text        ::= .*
if          ::= text
else        ::= text

使用 TextMate 代码片段

您还可以在 VS Code 中使用现有的 TextMate 代码片段 (.tmSnippets)。请参阅我们扩展 API 部分中的 使用 TextMate 代码片段主题以了解更多信息。

为代码片段分配键盘快捷键

您可以创建自定义键盘快捷键来插入特定代码片段。打开 keybindings.json（首选项：打开键盘快捷键 (JSON)），其中定义了您所有的快捷键，并添加一个快捷键，将 "snippet" 作为额外参数传递：

{
  "key": "cmd+k 1",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "snippet": "console.log($1)$0"
  }
}

该键盘快捷键将调用插入代码片段命令，但不会提示您选择代码片段，而是直接插入提供的代码片段。您可以像往常一样定义带有快捷键、命令 ID 和可选当上下文的自定义快捷键绑定，以指定启用该快捷键的条件。

此外，您可以使用 langId 和 name 参数来引用现有代码片段，而不是使用 snippet 参数值来内联定义代码片段。langId 参数选择代码片段对应的语言，name 指定代码片段名称。例如，下方的示例选择了适用于 csharp 文件的 myFavSnippet。

{
  "key": "cmd+k 1",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "langId": "csharp",
    "name": "myFavSnippet"
  }
}

后续步骤

  • 命令行 - VS Code 拥有强大的命令行界面，用于打开或对比文件以及安装扩展。
  • 扩展 API - 了解扩展 VS Code 的其他方法。
  • 代码片段指南 - 您可以将代码片段打包以供在 VS Code 中使用。

常见问题

如果我想使用现有的 .tmSnippet 文件中的 TextMate 代码片段怎么办？

您可以轻松打包 TextMate 代码片段文件以在 VS Code 中使用。请参阅我们扩展 API 文档中的 使用 TextMate 代码片段。

如何让代码片段在粘贴的脚本中放置一个变量？

要使变量出现在粘贴的脚本中，您需要转义 $variable 名称中的 '$'，这样它就不会在代码片段扩展阶段被解析。

"VariableSnippet":{
    "prefix": "_Var",
    "body": "\\$MyVar = 2",
    "description": "A basic snippet that places a variable into script with the $ prefix"
  }

这将导致粘贴的代码片段显示为：

$MyVar = 2

我可以从 IntelliSense 中移除代码片段吗？

是的，您可以选择插入代码片段命令下拉菜单中代码片段项目右侧的从 IntelliSense 中隐藏按钮，从而隐藏特定的代码片段，使其不再出现在 IntelliSense（补全列表）中。

Hide from IntelliSense button in Insert Snippet dropdown

您仍然可以通过插入代码片段命令选择该代码片段，但它不会再显示在 IntelliSense 中。

4/8/2026
English 한국어 中文(简体) 中文(繁體)
© . This site is unofficial and not affiliated with Microsoft.