返回

在 Visual Studio Code 中创建您自己的扩展

前端

对于任何开发人员来说,Visual Studio Code (VSCode) 都是一个必备工具。它功能强大、可扩展且易于使用。在本文中,我们将了解如何利用 VSCode 扩展功能来创建您自己的扩展。

创建一个扩展

首先,我们需要创建一个新的扩展。为此,请打开 VSCode 并转到文件 > 首选项 > 扩展。在搜索栏中,输入“创建扩展”。

单击“创建扩展”按钮,VSCode 将为您创建一个新文件夹,其中包含扩展所需的所有必要文件。

添加代码片段

下一步是添加一些代码片段。代码片段是一段预定义的代码,可以自动插入到您的代码中。要添加代码片段,请在扩展文件夹中打开 package.json 文件。

在 package.json 文件中,您需要添加一个名为 "contributes" 的部分。 "contributes" 部分用于指定您的扩展将提供的贡献。对于代码片段,您需要添加以下内容:

"contributes": {
  "snippets": [
    {
      "language": "javascript",
      "prefix": "log",
      "body": [
        "console.log($1);"
      ],
      "description": "Logs a message to the console."
    }
  ]
}

此代码将添加一个名为“log”的代码片段,它将插入“console.log($1);”行。

提供代码提示

除了代码片段,您还可以提供代码提示。代码提示是在您键入时显示在编辑器中的建议。要提供代码提示,您需要在 package.json 文件中添加一个名为 "configurationDefaults" 的部分。 "configurationDefaults" 部分用于指定扩展的默认设置。对于代码提示,您需要添加以下内容:

"configurationDefaults": {
  "editor.quickSuggestions": {
    "other": true
  }
}

此代码将启用所有其他代码提示。

发布您的扩展

最后,您需要将您的扩展发布到 Visual Studio Code MarketPlace。为此,请转到 Visual Studio Code 网站并单击“发布扩展”。

在发布扩展之前,您需要先创建一个帐户。创建帐户后,您可以单击“发布扩展”按钮并按照说明进行操作。

结论

在本文中,我们了解了如何利用 Visual Studio Code 的扩展功能来创建您自己的扩展。我们创建了一个代码片段,提供了一个代码提示,并最终将扩展发布到了 Visual Studio Code MarketPlace。