现已发布!阅读关于 12 月份的新功能和修复。

扩展清单

每个 Visual Studio Code 扩展都需要一个名为 package.json 的清单文件,位于扩展目录结构的根目录下。

字段

名称 必需 类型 详细信息
name name 字符串 扩展的名称 - 必须全小写且不含空格。
该名称在 Marketplace 中必须是唯一的。
version name 字符串 兼容 SemVer 的版本。
publisher name 字符串 发布者标识符
engines name 对象 一个对象,至少包含 vscode 键,该键的值应与扩展兼容的 VS Code 版本相匹配。不能是 *。例如:^0.10.5 表示兼容最低 VS Code 版本 0.10.5
license 字符串 请参阅 npm 的文档。如果您的扩展根目录下确实有一个 LICENSE 文件,那么 license 的值应为 "SEE LICENSE IN <filename>"
displayName 字符串 在 Marketplace 中显示的扩展名称。
该显示名称在 Marketplace 中必须是唯一的。
描述 字符串 对您的扩展是什么以及它做什么的简短描述。
categories string[] 您希望用于扩展的类别。允许的值:[Programming Languages, Snippets, Linters, Themes, Debuggers, Formatters, Keymaps, SCM Providers, Other, Extension Packs, Language Packs, Data Science, Machine Learning, Visualization, Notebooks, Education, Testing]
keywords 数组 一组 **关键字**,便于查找扩展。这些关键字将与其他扩展 **标签** 一起显示在 Marketplace 上。此列表目前最多支持 30 个关键字。
galleryBanner 对象 有助于格式化 Marketplace 标题以匹配您的图标。有关详细信息,请参阅下文。
preview 布尔值 将扩展标记为 Marketplace 中的“预览”版。
main 字符串 扩展的入口点。
browser 字符串 Web 扩展 的入口点。
contributes 对象 一个对象,描述扩展的 贡献点
activationEvents 数组 此扩展的 激活事件 数组。
badges 数组 将在 Marketplace 扩展页面的侧边栏显示的“已批准”徽章数组。每个徽章是一个包含 3 个属性的对象:url(徽章图片 URL)、href(用户点击徽章时将跳转到的链接)和 description
Markdown 字符串 控制在 Marketplace 中使用的 Markdown 渲染引擎。可以是 github(默认)或 standard
qna marketplace(默认)、stringfalse 控制 Marketplace 中的 **问答** 链接。设置为 marketplace 以启用默认的 Marketplace 问答站点。设置为字符串以提供自定义问答站点的 URL。设置为 false 以完全禁用问答功能。
sponsor 对象 指定用户可以赞助您的扩展的位置。这是一个包含单个属性 url 的对象,该属性链接到用户可以赞助您的扩展的页面。
dependencies 对象 您的扩展所需的任何运行时 Node.js 依赖项。与 npm 的 dependencies 完全相同。
devDependencies 对象 您的扩展所需的任何开发 Node.js 依赖项。与 npm 的 devDependencies 完全相同。
extensionPack 数组 一个包含可以一起安装的扩展 ID 的数组。扩展的 ID 始终是 ${publisher}.${name}。例如:vscode.csharp
extensionDependencies 数组 一个包含此扩展所依赖的扩展 ID 的数组。扩展的 ID 始终是 ${publisher}.${name}。例如:vscode.csharp
extensionKind 数组 一个数组,指示扩展在远程配置中应在哪里运行。可能的值为 ui(在本地运行)、workspace(在远程计算机上运行)或两者都运行,顺序表示优先级。例如:[ui, workspace] 表示扩展可以在任一位置运行,但首选在本地计算机上运行。有关更多详细信息,请参见 此处
scripts 对象 与 npm 的 scripts 完全相同,但增加了 VS Code 特定的字段,如 vscode:prepublishvscode:uninstall
icon 字符串 至少 128x128 像素(视网膜屏幕为 256x256)的图标路径。
pricing 字符串 扩展的定价信息。允许的值:FreeTrial。默认值:Free。有关更多详细信息,请参阅 此处
capabilities 对象 一个对象,描述扩展在受限工作区中的功能:untrustedWorkspacesvirtualWorkspaces

另请参阅 npm 的 package.json 参考

示例

这是一个完整的 package.json 文件示例

{
  "name": "wordcount",
  "displayName": "Word Count",
  "version": "0.1.0",
  "publisher": "ms-vscode",
  "description": "Markdown Word Count Example - reports out the number of words in a Markdown file.",
  "author": {
    "name": "sean"
  },
  "categories": ["Other"],
  "icon": "images/icon.png",
  "galleryBanner": {
    "color": "#C80000",
    "theme": "dark"
  },
  "pricing": "Free",
  "activationEvents": ["onLanguage:markdown"],
  "engines": {
    "vscode": "^1.0.0"
  },
  "main": "./out/extension",
  "scripts": {
    "vscode:prepublish": "node ./node_modules/vscode/bin/compile",
    "compile": "node ./node_modules/vscode/bin/compile -watch -p ./"
  },
  "devDependencies": {
    "@types/vscode": "^0.10.x",
    "typescript": "^1.6.2"
  },
  "license": "SEE LICENSE IN LICENSE.txt",
  "bugs": {
    "url": "https://github.com/microsoft/vscode-wordcount/issues",
    "email": "sean@contoso.com"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/microsoft/vscode-wordcount.git"
  },
  "homepage": "https://github.com/microsoft/vscode-wordcount/blob/main/README.md"
}

Marketplace 展示技巧

以下是一些让您的扩展在 VS Code Marketplace 上看起来更出色的技巧和建议。

始终使用最新的 vsce,运行 npm install -g @vscode/vsce 以确保您已安装。

在扩展的根文件夹中放置一个 README.md Markdown 文件,我们将把内容包含在扩展详细信息的正文中(在 Marketplace 上)。您可以在 README.md 中提供相对路径的图片链接。

这里有一些例子

  1. Word Count
  2. MD Tools

提供良好的显示名称和描述。这对于 Marketplace 和产品显示非常重要。这些字符串也用于 VS Code 中的文本搜索,相关的关键字将大有帮助。

    "displayName": "Word Count",
    "description": "Markdown Word Count Example - reports out the number of words in a Markdown file.",

一个图标和一个对比鲜明的横幅颜色在 Marketplace 页面标题上看起来效果很好。theme 属性指的是横幅中使用的字体 - darklight

{
  "icon": "images/icon.png",
  "galleryBanner": {
    "color": "#C80000",
    "theme": "dark"
  }
}

有几个可选的链接(bugshomepagerepository)可以设置,这些链接显示在 Marketplace 的 **Resources** 部分下。

{
  "license": "SEE LICENSE IN LICENSE.txt",
  "homepage": "https://github.com/microsoft/vscode-wordcount/blob/main/README.md",
  "bugs": {
    "url": "https://github.com/microsoft/vscode-wordcount/issues",
    "email": "sean@contoso.com"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/microsoft/vscode-wordcount.git"
  }
}
Marketplace 资源链接 package.json 属性
Issues bugs:url
Repository repository:url
Homepage homepage
许可证 license

为您的扩展设置一个 category。同一 category 下的扩展将在 Marketplace 上分组,从而提高筛选和发现的效率。

注意: 只使用对您的扩展有意义的值。允许的值是 [Programming Languages, Snippets, Linters, Themes, Debuggers, Formatters, Keymaps, SCM Providers, Other, Extension Packs, Language Packs, Data Science, Machine Learning, Visualization, Notebooks, Education, Testing]。对于一般的语言功能(如语法高亮和代码补全),请使用 Programming LanguagesLanguage Packs 类别保留给显示语言扩展(例如,本地化的保加利亚语)。

{
  "categories": ["Linters", "Programming Languages", "Other"]
}

已批准的徽章

出于安全考虑,我们只允许来自受信任服务的徽章。

我们允许以下 URL 前缀的徽章

  • api.travis-ci.com
  • app.fossa.io
  • badge.buildkite.com
  • badge.fury.io
  • badgen.net
  • badges.frapsoft.com
  • badges.gitter.im
  • cdn.travis-ci.com
  • ci.appveyor.com
  • circleci.com
  • cla.opensource.microsoft.com
  • codacy.com
  • codeclimate.com
  • codecov.io
  • coveralls.io
  • david-dm.org
  • deepscan.io
  • dev.azure.com
  • docs.rs
  • flat.badgen.net
  • github.com (仅来自 Workflows)
  • gitlab.com
  • godoc.org
  • goreportcard.com
  • img.shields.io
  • isitmaintained.com
  • marketplace.visualstudio.com
  • nodesecurity.io
  • opencollective.com
  • snyk.io
  • travis-ci.com
  • visualstudio.com
  • vsmarketplacebadges.dev

注意:请将 vsmarketplacebadge.apphb.com 徽章替换为 vsmarketplacebadges.dev 徽章。

如果您想使用其他徽章,请在 GitHub 上 提交一个 issue,我们会乐意进行查看。

合并扩展贡献

yo code 生成器可以让您轻松打包 TextMate 主题、着色器和代码片段,并创建新的扩展。运行生成器时,它会为每个选项创建一个独立的完整扩展包。然而,通常更方便的是拥有一个合并了多个贡献点的单个扩展。例如,如果您正在添加对新语言的支持,您希望同时为用户提供语言定义(包括着色)以及代码片段,甚至可能是调试支持。

要合并扩展贡献,请编辑现有的扩展清单 package.json 并添加新的贡献点和相关文件。

下方是一个包含 LaTex 语言定义(语言标识符和文件扩展名)、着色(grammars)和代码片段的扩展清单。

{
  "name": "language-latex",
  "description": "LaTex Language Support",
  "version": "0.0.1",
  "publisher": "someone",
  "engines": {
    "vscode": "0.10.x"
  },
  "categories": ["Programming Languages", "Snippets"],
  "contributes": {
    "languages": [
      {
        "id": "latex",
        "aliases": ["LaTeX", "latex"],
        "extensions": [".tex"]
      }
    ],
    "grammars": [
      {
        "language": "latex",
        "scopeName": "text.tex.latex",
        "path": "./syntaxes/latex.tmLanguage.json"
      }
    ],
    "snippets": [
      {
        "language": "latex",
        "path": "./snippets/snippets.json"
      }
    ]
  }
}

请注意,扩展清单的 categories 属性现在同时包含 Programming LanguagesSnippets,以便在 Marketplace 上轻松发现和筛选。

提示: 确保您合并的贡献使用相同的标识符。在上面的示例中,所有三个贡献都使用了“latex”作为语言标识符。这会告诉 VS Code 着色器(grammars)和代码片段是针对 LaTeX 语言的,并在编辑 LaTeX 文件时激活。

扩展包

您可以将单独的扩展打包到 **Extension Packs** 中。扩展包是一组将一起安装的扩展。这使得您可以轻松地与其他用户共享您喜欢的扩展,或者为特定场景(如 PHP 开发)创建一个扩展集,以帮助 PHP 开发人员快速开始使用 VS Code。

扩展包通过 package.json 文件中的 extensionPack 属性来打包其他扩展。

例如,这是一个用于 PHP 的扩展包,它包含一个调试器和一个语言服务

{
  "extensionPack": ["xdebug.php-debug", "zobo.php-intellisense"]
}

安装扩展包时,VS Code 现在也将安装其扩展依赖项。

扩展包应在 Extension Packs Marketplace 类别中进行分类。

{
  "categories": ["Extension Packs"]
}

要创建扩展包,您可以使用 yo code Yeoman 生成器并选择 **New Extension Pack** 选项。有一个选项可以使用您当前在 VS Code 实例中已安装的扩展集来填充该包。通过这种方式,您可以轻松创建包含您最喜欢的扩展的扩展包,将其发布到 Marketplace,并与他人共享。

扩展包不应与其捆绑的扩展有任何功能性依赖关系,并且捆绑的扩展应独立于该包进行管理。如果一个扩展依赖于另一个扩展,则应使用 extensionDependencies 属性声明该依赖项。

扩展卸载钩子

如果您的扩展在从 VS Code 卸载时需要进行任何清理工作,您可以注册一个 node 脚本到扩展 `package.json` 的 `scripts` 部分下的卸载钩子 `vscode:uninstall`。

{
  "scripts": {
    "vscode:uninstall": "node ./out/src/lifecycle"
  }
}

此脚本将在扩展完全从 VS Code 卸载后执行,即在卸载扩展后重启 VS Code(关闭和启动)。

注意: 只支持 Node.js 脚本。

有用的 Node 模块

npm.js 上有几个 Node.js 模块可用于编写 VS Code 扩展。您可以将它们包含在扩展的 dependencies 部分。

后续步骤

要了解有关 VS Code 可扩展性模型的更多信息,请尝试以下主题

© . This site is unofficial and not affiliated with Microsoft.