配置代码片段 (Code Snippets)

何谓代码片段？

VS Code 官网是这样描述代码片段的：

Code snippets are templates that make it easier to enter repeating code patterns, such as loops or conditional-statements.

具体来说，每一个代码片段拥有一个 snippet name，并且由 prefix、body 和 description 三部分组成。

这里的 snippet name 是代码片段的名称，prefix 为触发词（我个人更愿意将其称之为 trigger），用来触发代码片段，body 是代码片段主体，当代码片段触发后，body 将展开并插入光标所在位置，description （非必需）是对代码片段的补充描述。

代码片段文件格式为 JSON，支持 C 语言风格注释（以 // 开头）。代码片段的框架为：

// comments
"snippet name": {
  "prefix": "...",
  "body": "...",
  "description": "..."
}

内置代码片段

VS Code 为很多语言内置了代码片段，比如：JavaScript、TypeScript、Markdown 和 PHP。可以在命令面板（Shift+Command+P）中输入 Insert Snippet 查看当前文件对应语言的代码片段列表。这个列表既包含自定义的代码片段，也包含已安装拓展所提供的代码片段。

以 Markdown 为例，VS Code 为我们预定义了下列代码片段（这里所列的是其中的 prefix）

  • code
  • image
  • ordered list
  • unordered list
  • quote
  • inline math
  • fenced math
  • fenced codeblock
  • link
  • bold
  • italic
  • heading1–6
  • horizontal rule
  • strikethrough

所以，如果需要将某段文字加粗，可以这么做：

bold-snippet
使用为 Markdown 语言内置的 Bold Snippet

自定义代码片段

VS Code 预定义的代码片段往往不能满足用户的需求，所以其允许用户来自定义代码片段。具体方法如下：

点击 Code→首选项→配置用户代码片段，然后选择某个 language（下面的操作以 $\LaTeX$ 为例），我们会进入到 latex.json 的编辑界面，然后逐条添加代码片段即可，其中 snippet name、prefix、description 都很简单，接下来重点说说 body 部分该怎么写。

要想把 body 写好，有以下几个概念需要掌握：

  • 定位点 (tabstops): 通过定位点，你可以让光标在代码片段中移动。使用 $1、$2 等指定光标位置，最开始光标停留在 $1 所在位置，按一下 tab 键后光标跳转至 $2 所在位置，依此类推。$0 比较特殊，其指定光标最后的位置。
  • 占位符 (Placeholders): 赋值1的定位点称为占位符，如 ${1:foo} 就是一个占位符（其表示第一个定位点，并被赋值为 foo），所赋之值会被插入到定位点处并且被选中以方便修改。
  • 选项: 占位符可以将选项作为值，选项由逗号隔开并且由两条竖线包裹，如 ${1|a,b,c|}。

  • 转义: 部分字符或字符序列具有特殊用途，若想得到该字符或字符序列本身需要转义，具体见下表：

    所需字符 转义序列
    \ \ $\times 2$ 或 \ $\times 4$
    \\ \ $\times 6$ 或 \ $\times 8$
    $ \\$
    " \"
    tab \t
    newline \n

反斜线的转义规则：假设转义序列中有 $2n$ 个反斜线，那么就取 $n/2$ 的右侧邻近整数。

「光说不练假把式」，下面我们举几个例子来演示一下：

实例 1——偏导数

偏导数的 $\TeX$ 代码结构为

\frac{\partial }{\partial }

这里有两个地方需要用户填充，所以代码片段可以这样写：

  "Partial Differentiation Operation": {
    "prefix": "fp",
    "body": "\\frac{\\partial $1}{\\partial $2}$0"
  }
fp
实例 1 效果演示

实例 2—— enumerate 环境

enumerate 环境接受一个可选参数来确定标签格式，如 [1]、[(1)]、[(a)]、[(i)]、[(I)] 等，我们可以将默认值设置为 [(1)]，这样的话，代码片段可以这样写：

  "Enumerate Environment": {
    "prefix": "ben",
    "body": [
      "\\begin{enumerate}[${1:(1)}]",
      "\t\\item $0",
      "\\end{enumerate}"
    ]
  }
ben
实例 2 效果演示

实例 3——最小工作示例（MWE）

我们常常需要一个简短但完整的 $\LaTeX$ 代码框架来做测试，这个框架就是所谓的 MWE (Minimal Working Example)。

在西文环境下，文档类有 article、report 和 book 三种最常用的选择，所以我们可以设置代码片段为：

"MWE-en": {
    "prefix": "mwe-en",
    "body": [
      "\\documentclass{${1|article,report,book|}}\n$2",
      "\\begin{document}\n\n$0\n",
      "\\end{document}"
    ],
    "description": "MWE English version"
  }
mwe
实例 3 效果演示

常用快捷键

  • Command-J: 打开或关闭集成终端
  • Ctrl-波浪符: 光标在终端与编辑区之间跳转
  • Option+Command+上下箭头: 插入多光标

注释

参考

  1. 这里的赋值不是指给变量赋值，而是在该定位点处填充一个默认文本，颇有默认参数的味道。 ↩