如何在 Visual Studio 代码中的 Emmet 中添加自定义片段 - TypeScript

Emmet 是用于加快 HTML 和 CSS 编写的强大插件之一。它使您可以从简写转换为完整的 HTML 和 CSS 代码。Emmet 支持 Visual Studio Code、Sublime Text、Atom 和其他一些代码编辑器。

在本教程中，我们将讨论如何在 Visual Studio Code 中的 Emmet 中添加自定义代码片段，以便加快 TypeScript 编写。

步骤 1：进入用户片段

首先，您需要在 Visual Studio 代码中打开 User Snippets。您可以使用以下快捷键将其打开：

Ctrl + Shift + P

在命令框中，键入“user snippet”并选择“Preferences: Configure User Snippets”。这将打开一个下拉菜单，其中包含支持的语言选项。

步骤 2：选择与您的语言相关的选项

在此处选择 TypeScript。您将看到一个只包含“TypeScript”选项的新下拉菜单。

步骤 3：添加片段

在“TypeScript.json”中，您可以添加自定义片段。例如，如果您想添加一个快速编写接口的片段，您可以添加以下代码：

{
    "Interface": {
        "prefix": "inf",
        "body": [
            "interface $1 {",
            "\t$2",
            "}",
        ],
        "description": "Create new interface"
    },
}

此代码创建一个名为“Interface”的新片段。该片段可以使用“inf”。在该片段中，第一文本输入部分有一个标题“$1”和一个值。第一个是标题，第二个是值。 $1和$2都是变量后续可以修改。

注意：每个片段都必须有一个前缀和身体。将片段的信息放在花括号内。

带有“$”符号的数字是变量。在您添加完片段之后，您可以按下 Tab 键跳到任何变量中。

步骤 4：保存并应用

您添加属性后，按“Ctrl + S”保存片段代码。此时重新打开 Visual Studio Code，并在 TypeScript 代码中尝试使用快捷方式。

例如，如果您键入“inf”并按 Tab 键，它将自动转换为一个已完成接口的代码片段，即：

interface InterfaceName {
    // A blank new interface is created here.
}

完美！现在您可以开始在 Visual Studio Code 中加入自定义 TypeScript 片段。有关如何添加其他自定义片段的更多信息，请查看以下官方文档：

Visual Studio Code — User and Workspace Settings

结论

在 Visual Studio Code 的 Emmet 中添加自定义片段是一个非常有用的功能。它可以使您更快地编写代码，并且减少了出错的机会。虽然我们在本文中使用的是 TypeScript 片段，但您可以使用相同的步骤为其他语言添加自定义片段！