在 VSCode 中使用代码片段

231 阅读1分钟

创建自定义片段

要创建自己的代码片段,可以使用 Ctrl+Shift+P 唤出命令行输入框,并输入 Configure User Snippets,回车后自动创建代码片段文件。

代码片段文件是 JSON 格式。每个片段包含以下属性:

  • prefix: 前缀,用于触发代码片段
  • body: 片段展开后的内容,是一个字符串数组,数组的每个元素代表一行。其中可以包含 $1, $2 等占位符,表示光标切换位置
  • description: 描述代码片段

比如:

{
    "For Loop": {
        "prefix": ["for", "for-const"],
        "body": [
            "for (const ${2:element} of ${1:array}) {",
            "\t$0",
            "}"
        ]
    }
}

片段的语法

片段的 body 可以包含特殊变量,用于控制光标和插入的文本。语法如下:

光标位置

使用 $1, $2 等变量指定光标插入位置,可以使用 TAB 切换位置。$0 比较特殊,表示最终的光标位置。相同 id 的多处位置,会同步插入和更新文本。

占位文本

占位文本的语法是 ${1:foo} ,其中的 foo 会作为默认值插入。占位文本可以嵌套,比如:${1:another ${2:placeholder}}

选项

选项是逗号分隔的枚举值,两侧使用管道符号分离,比如:${1|one,two,three|}

变量

使用 $name${name:default} 插入变量的值。常用的变量名有:

  • TM_SELECTED_TEXT 当前选中的文本或空字符串
  • TM_CURRENT_LINE 当前行的内容
  • TM_CURRENT_WORD 光标下的单词或空字符串
  • BLOCK_COMMENT_START 块注释的开始,比如 HTML 的 <!--
  • BLOCK_COMMENT_END 块注释的结尾,比如 HTML 的 -->
  • LINE_COMMENT 单行注释的开始

REF

  1. Snippets in Visual Studio Code
  2. Language Identifiers