有效編碼的 VS Code 快捷方式掌握

在使用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 提供了不同程式語言的智慧編輯功能。語言擴充為程式語言提供額外的支援，例如：

• 語法高亮
• 智能感知
• 格式化
• 錯誤檢查
• 程式片段完成

擴充套件可以透過 VS Code 的擴充套件選單安裝。

您可以通过在Windows上打开JSON文件来查看语言扩展提供的这些代码片段的定义位置，路径为C:\Users<用户名>.vscode\extensions\ms-code.-\snippets。

扩展本身与代码片段无关，但您会发现许多扩展都带有内置的代码片段，您应该知道这一点。

展开代码片段

当您通过菜单界面选择代码片段时，将会将代码片段的内容显示在文件中。将代码片段定义转换为有用的代码的过程称为展开。

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

使用VS Code扩展的代码片段

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

扩展的代码片段存储位置

這些擴展通常在Windows系統下安裝在您電腦的C:\Users<UserName>.vscode\extensions目錄中，如下所示。

這些擴展的文件夾遵循ms-vscode.-的命名規則。每個文件夾包含一個snippet文件夾，其中包含該擴展所附帶的代碼片段。

擴展代碼片段示例

為了演示如何使用擴展代碼片段，我們以PowerShell擴展為例。該擴展附帶了幾個有用的代碼片段，稱為region和for，可加快創建PowerShell區塊和for循環的速度。

假設您需要在PowerShell腳本中創建一個包含在區塊中的for循環。下面是執行此操作的代碼。屏幕截圖中的代碼長度為50個字符，它創建了一個在1到10之間迭代的for循環。

您可以使用隨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 檔案。這個檔案是存儲自定義片段的地方，您可以在這裡創建自定義片段。

對於自定義片段，需要指定四個數據項：

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

創建一個自定義的 Python 片段

讓我們看看如何為Python編程語言創建一個自定義片段。在這個例子中，dt前綴將調用一個自定義的Python片段。該片段將打印一個帶有當前時間預填的消息。

創建JSON文件

首先打開片段語言選擇器，輸入Python，然後按Enter創建一個python.json文件。這將在Windows的C:\Users<UserName>\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將為空。您可以在下面的屏幕截圖中看到這一點。

使用Tab Stops創建自定義PowerShell片段

到目前為止，您看到的示例在調用時都是完整的。即使JavaScript也假設您在之前已經選中文本。但是，如果您需要在調用片段之後輸入值，該怎麼辦呢？

如果您想要在console.log()中輸入值而不是使用選中的文本，該怎麼辦？如果您想要在片段中的不同位置輸入值，該怎麼辦？

在本節中，您將學習如何使用制表位（tab stops），使您能夠在展開的程式碼片段中輸入文字。制表位是您程式碼片段中設定的固定位置，光標將會停在這些位置上。每次按下Tab鍵時，光標都會按照順序訪問這些位置。有了這些制表位，您可以在展開程式碼片段之後輸入值。

制表位是使用程式碼片段變數$0、$1、$2等在程式碼片段內部指定的，它們告訴程式碼片段在呼叫並按下Tab鍵時光標將會到達的下一個位置。

制表位的順序遵循正常排序（1後面是2，2後面是3等等），但有一個例外：制表位0是在所有其他制表位之後光標停留的位置。為了演示這一點，下面的程式碼片段會展開為一個帶有當前日期的Write-Output訊息，並提供一個用於輸入更多文字的位置。

此body有兩個制表位

• 在Write-Output訊息的末尾是$1
• $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:this is my default message}。冒號後面的值成為默認值。此值將與片段一起展開。

當達到該制表位時，可以發生兩件事。默認值可以被覆寫，或者可以被跳過，保持其默認值。

下面您可以看到正文中的更改。

{
	"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窗口中，如下面的截圖所示。

預設訊息是選項停駐點 (tab stops) 的好範例。選項停駐點也提供了選擇的選項。在下一節中，您將看到如何將選擇加入到您的選項停駐點中。

將選擇加入到選項停駐點中

選項停駐點不僅限於預設值或無值。在 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 函數介紹