掌握 VS Code 代码片段，高效编码 – techsyncer

当你在Visual Studio Code（VS Code）中编写最新的代码时，是否经常发现自己一遍又一遍地输入相同的内容？也许今天你已经十次输入了函数声明，或者第二十次为相同的命令定义了相同的参数。你知道你可以通过使用Visual Studio Code片段来节省时间和精力吗？

Visual Studio Code片段是存储在VS Code中的小段文本。您可以通过菜单或键序列调用这些片段，并且在发现自己重复输入几乎相同的文本块时，可以节省大量时间。

例如，下面你可以看到，在VS Code中简单输入wvb，就可以选择展开更多文本，如框中的Write-Verbose文本所示。这就是片段的威力！

在本文中，您将学习如何使用VS Code片段，包括使用默认片段、扩展片段，甚至创建自己的片段！

先决条件

本文将进行一步一步的演示，让你动手操作。如果你计划跟着学习如何使用VS Code片段，你需要VS Code版本1.17或更高版本。完整的话，我将在Windows上使用VS Code 1.38.1。

你可以在这里为你的特定平台下载最新版本的VS Code。

寻找VS Code片段

在开始构建自己的代码片段之前（你肯定会这样做），学会如何查找可用的内置代码片段非常重要。

你可以在菜单界面中找到所有的代码片段。菜单界面允许你查看和使用代码片段。要访问菜单，你可以按下F1或Ctrl-Shift-P，输入“snippet”，然后按Enter。你会看到一个类似下面所示的弹出菜单。

当你在插入代码片段上按下Enter时，你会看到一个可用代码片段的下拉菜单，如下所示。你可以看到默认情况下有相当多的代码片段可用，并通过向下滚动查看更多。

可用代码片段的下拉菜单允许你查看通过在 VS Code 中添加语言扩展而可用的内置代码片段。

语言扩展

你可以使用 VS Code 来处理许多不同的编程语言。每种语言都有自己的特点。为了支持这些差异，VS Code 支持语言扩展。

语言扩展为不同的编程语言提供了智能编辑功能。语言扩展为编程语言提供了额外的支持，例如：

语法高亮
智能感知
格式化
错误检查
代码片段完成

通过 VS Code 扩展菜单安装扩展。

您可以通过打开位于 C:\Users<UserName>.vscode\extensions\ms-code.-\snippets 的 JSON 文件来查看语言扩展提供的这些代码片段的定义。

扩展本身与片段无关，但您会发现许多扩展都附带了内置的代码片段，您应该注意到这一点。

展开代码片段

当您通过菜单界面选择一个代码片段时，您将看到代码片段的内容插入到文件中。将代码片段定义转换为有用代码的过程称为展开。

当您调用前缀时，VS Code 会读取该特定前缀并运行您在代码片段中定义的任何指令。这些指令可能因代码片段而异。调用、转换和插入代码片段的整个过程称为展开。

使用 VS Code 扩展代码片段

一些代码片段默认包含在 VS Code 中，但当您安装扩展时，它们有时会附带自己的代码片段。附带代码片段的扩展示例包括微软的 Python 扩展、微软的 PowerShell 扩展和微软的 C# 扩展。

扩展代码片段存储位置

这些扩展通常安装在 Windows 的C:\Users<UserName>.vscode\extensions目录下，如下所示。

扩展的文件夹遵循ms-vscode.-命名约定。其中每个文件夹都包含一个snippet文件夹，其中包含扩展所附带的代码片段。

Contents of *C:\Users<UserName>.vscode\extensions*

扩展代码片段示例

为了演示如何使用扩展代码片段，我们以 PowerShell 扩展为例。该扩展附带了一些实用的代码片段，如region和for，可加快创建 PowerShell区域块和*for*循环的速度。

假设您需要在 PowerShell 脚本中创建一个for循环并将其置于区域块中。下面显示了执行此操作的代码。屏幕截图中的代码长度为50个字符，并在区域块内创建了一个for循环，该循环迭代1到10之间的数字。

与在此示例中逐个输入每个字符不同，您可以使用安装在 Microsoft 的 PowerShell 扩展中的两个代码片段region和for。

看一下下面的示例，看看如何轻松使用这些代码片段来节省大量输入！

创建 Visual Studio Code 自定义代码片段

您不必局限于 VS Code 自带的代码片段或扩展中提供的代码片段。也许现有的扩展中没有您需要的代码布局，或者您想要自己格式化这些代码片段。幸运的是，您可以创建自己的代码片段！在本节中，您将看到如何操作。

要创建自定义代码片段，请点击文件 → 首选项 → 用户片段在 VS Code 中打开您的用户片段。这将为您打开代码片段语言选择范围。在这里，您可以指定要创建代码片段的语言。您可以在下面的截图中看到这是什么样子。

通过选择一种语言，VS Code 将在 Windows 上的C:\Users<UserName>\AppData\Roaming\Code\User\snippets中创建一个language.json文件。为不同语言创建的所有用户片段都将在此目录中有一个文件。

您看到的可用语言可能与上面所示的不同。在上述 VS Code 安装中，已经安装了许多语言扩展。

找到您想要为其创建代码片段的语言，然后按 Enter 打开语言 JSON 文件。该文件是您自定义代码片段的存储位置，您可以在此处创建您的自定义代码片段。

有四个数据项需要指定一个自定义代码片段：

A snippet name (line 9 below)
A prefix, which is what you’ll use to call your snippet (line 8 below)
A body, which is your snippet code that is loaded into your scripts (lines 7 to 3 below)
A description, which will show up in your IntelliSense (line 2 below)

*Example snippet definition of the For statement*

创建自定义 Python 代码片段

让我们看看创建 Python 编程语言的自定义片段需要哪些步骤。在这个例子中，dt 前缀将调用一个自定义 Python 片段。这个片段将打印一个包含当前时间的消息。

创建 JSON 文件

首先打开片段语言选择器，输入 Python，然后按 Enter 键创建一个 python.json 文件。这将在 Windows C:\Users<用户名>\AppData\Roaming\Code\User\snippets 文件夹中生成一个 python.json 文件。

您可以在下面的图像中看到它的默认状态。

分配名称和前缀

现在是时候开始编辑 JSON 文件了。首先，定义名称和前缀（dt）。片段前缀要简短明了，因为这是调用片段时输入的值。前缀越短，调用时需要输入的字符就越少。

您可以在下面看到一个示例。

定义主体

主体包含在调用片段时将展开的代码。这段代码可以是简单的文本和注释。它还可以包含您将在后面章节中看到的其他功能。如果主体有多行，您需要注意一些小问题。

每行需要用双引号括起来
每行需要以逗号结尾
所有行都需要在方括号内（“ [ ”和“ ] ”）

您可以在下面看到一个示例片段主体的示例。

定义描述

描述是下面定义的前缀的消息描述。

描述将显示在片段列表中前缀下方，并提供有关片段功能的更多信息。它还有助于区分创建的类似片段。

以下是识别前缀和描述的示例截图。

如果您还没有定义任何自定义 Python 片段，则在创建完片段后，您应该有一个名为 python.json 的文件，其内容如下代码片段所示。

{
    "DateTime Snippet": {
        "prefix": "dt",
        "body": [
            "import datetime",
            "dt = datetime.datetime.now()",
            "print(f\"The time is {dt} and this is a message\")"
        ],
        "description": "Prints a message with current time"
    }
}

保存此 JSON 文件，现在自定义片段可在 VS Code 中的任何 Python 文件中使用。

现在，当您打开一个 Python 选项卡并输入前缀 dt 时，将显示下面的自定义片段。按 Enter 将展开片段主体到 Python 选项卡中。

使用包含的文本创建自定义 JavaScript 片段

片段不仅限于片段主体中定义的单词。片段还可以包括从您调用它们的文件中提取的文本。

VS Code 具有您可以使用的内部变量。这些是占位符，将当前突出显示的文本插入到片段中。例如，通过在片段中放置变量 $TM_SELECTED_TEXT，您可以显示所选文本。查看VS Code 变量参考页面，以了解所有内部 VS Code 变量的完整说明。

为了演示，让我们创建一个简单的代码片段，用于将所选文本输出到控制台，称为log-it。

打开代码片段语言选择器，输入JavaScript，然后按Enter以创建一个javascript.json文件。这个文件看起来类似于前面部分创建的python.json文件。不过这次，它包含的是示例 JavaScript 代码而不是 Python 代码。你可以在下面的截图中看到它的默认状态。

现在使用以下 JSON 创建一个代码片段：

{
	"Print selected line to console": {
		"prefix": "log-it",
		"body": [
			"console.log('$TM_SELECTED_TEXT');"
		],
		"description": "Log highlighted text output to console"
	}
}

保存这个 JSON 文件，现在你可以在你的 JavaScript 文件中使用这个代码片段了。

当你调用这个代码片段并突出显示文本时，它将用突出显示的文本替换$TM_SELECTED_TEXT。当你调用这个代码片段但没有突出显示的文本时，$TM_SELECTED_TEXT将为空。你可以在下面的截图中看到它的效果。

*JavaScript `$TM_SELECTED_TEXT`Snippet in Action*

创建一个自定义的 PowerShell 代码片段与标签停止

到目前为止，你看到的示例在调用时都是完整的。即使是 JavaScript 也假定你之前已经突出显示了文本。但是当你需要在调用代码片段后键入值时该怎么办呢？

如果你想在console.log()中键入值而不是使用突出显示的文本呢？如果你想在代码片段的各个位置键入值呢？

在这个部分，您将学习如何使用制表符（tab stops），以使您能够在展开的代码片段中输入文本。制表符是代码片段中设置的固定位置，光标将移到这些位置。每次按下制表键（tab）时，光标都会按照顺序移动到这些位置。有了这些制表符，您可以在展开代码片段后输入值。

通过在代码片段中使用$0、$1、$2等变量来定义制表符，指定了调用代码片段并按下制表键（tab）时光标将移动到的位置。

制表符按照正常顺序进行（1、2、3依次排列），唯一的例外是：制表符0是在所有其他制表符之后光标将停留的位置。为了演示这一点，下面的代码片段展开为一个带有当前日期和更多文本位置的Write-Output消息。

这个body中有两个制表符

$1位于Write-Output消息的末尾
$0位于下一行，使得代码片段最终在空行结束

{
    "DateTime Snippet PS": {
        "prefix": "dtPS",
        "body" : [
            "Write-Output -Message "The time is $((Get-Date).ToLocalTime()) and $1"","$0"
        ]
        "description": "PSCustomObject with 3 lines"
    }
}

保存此代码片段，并通过在PowerShell文件中键入前缀dtPS来调用它。

当代码片段展开时，光标会跳到制表符1的位置。从这里开始，添加您想要的值或代码，然后按下制表键（tab）以将光标跳到下一个制表符。这将一直继续，直到您浏览完您指定的所有制表符。

您可以在下面的截图中看到这个功能的效果。

向制表位添加默认值

虽然制表位很方便，但如果您需要在这些位置上通常使用特定值，并希望在必要时能够更改它们，该怎么办呢？现在是时候包含默认值了。

上面的示例有一个制表位，但当片段扩展时，其位置没有文本。光标跳到了制表位的位置，然后用户需要接管。

如果有一种方法可以让值处于制表位的位置——这样，片段就可以扩展，该值也会随之扩展。当制表位到达该位置时，默认值可以被覆盖，或者可以被跳过。

让我们看看如何向自定义片段添加默认值。您可以通过编辑上述的 PowerShell 片段 JSON 文件来执行此操作。

首先，打开片段语言选择器，选择 PowerShell，并将制表位从$1更改为${1:这是我的默认消息}。冒号后面的值成为默认值。此值会随片段一起扩展。

当命中该制表位时，会发生两件事情。默认值可以被覆盖，也可以被跳过，保留其默认值。

您可以在下面看到正文中的变化。

{
	"DateTime Snippet PS" {
		"prefix": "dtPS",
		"body" : [
			"Write-Output -Message \"The time is $((Get-Date).ToLocalTime()) and $1{1:this is my default message}\"",
			"$0"
		],
		"description": "PSCustomObject with 3 lines"
	}
}

更新并保存后，这些默认值会被扩展，并且在调用时也会显示在 IntelliSense 窗口中，如下面的截图所示。

默认消息是使用制表位时的良好示例。制表位还为您提供了选择的选项。在下一节中，您将看到如何在制表位中添加选择的示例。

向制表位添加选择

制表位不限于具有默认值或没有任何值。它们可以在VS Code片段定义中定义，以便在展开片段时向用户提供选项。

也许您遇到了这样的情况，希望在片段中选择不同的值或命令。您可以编辑片段以在制表位中呈现选择，而不是创建三个具有不同选项的不同片段，如下面的截图所示。

当在片段的正文中使用以下语法时，制表位将呈现一个选择：

${N|Choice1,Choice2,Choice3[,Choice]|}

上述制表位已被修改，以提供以下选择：

Write-Output
Write-Warning
Write-Error

通过在制表位后放置两个管道字符（|），来完成这一操作。选项放置在管道字符内，用逗号分隔。您可以在下面的代码块中看到这一点。

${1|
    Write-Output -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\", // <-- 选择 1 
    Write-Warning -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\", // <-- 选择 2
    Write-Error -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\" // <-- 选择 3
|}

下面是示例片段。

{
    "DateTime Snippet PS" {
        "prefix": "dtPS",
        "body" : [
            "Write-Output -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\", Write-Warning -Message \"The time is $(Get-Date).ToLocalTime()) and this is my default message\", Write-Error -Message \"The time is $(Get-Date).ToLocalTime()) and this is my default message\"|}",
            "$0"
        ],
        "description": "PSCustomObject with 3 lines"
    }
}

现在，当自定义片段展开时，选择哪个选项将出现在 IntelliSense 窗口中，如下面的截图所示。

从这里，您可以选择您想要的选项，并观看它被展开为该选项。在我们下面的示例截图中，整行代码被替换为选择从三个不同的Write命令中选择的选项，并显示每个选项都可以被调用和运行而不会出现问题。

摘要

自定义片段可以是简单的文本或代码。它们可以有制表符，因此您可以包含消息、默认值或选择，以及突出显示的文本。

不必每次都费力地键入每个代码块的每个字符。使用片段，您不必每次都记住for,，foreach或switch语句的确切语法。片段非常适合这个领域。

I’ve shown Python, JavaScript, and PowerShell snippets in this post. VS Code snippets are available for many, many more languages. Your limits are only what you use and what you can think of!

深入阅读

PowerShell函数介绍