现已推出!阅读 10 月份的新功能和修复。

扩展清单

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

字段

名称 必需 类型 详细信息
name Y string 扩展的名称 - 应该全部小写,没有空格。
名称必须在市场上是唯一的。
version Y string SemVer 兼容版本。
publisher Y string The 发布者标识符
engines Y object 包含至少一个 vscode 键的对象,该键与扩展程序 兼容 的 VS Code 版本相匹配。不能是 *。例如:^0.10.5 表示与最小 VS Code 版本 0.10.5 兼容。
license string 参考 npm 的文档。如果你在扩展的根目录中确实有 LICENSE 文件,则 license 的值应该是 "SEE LICENSE IN <filename>"
displayName string 在市场上使用的扩展显示名称。
显示名称必须在市场上是唯一的。
description string 简短描述你的扩展是什么以及它做什么。
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 array 一组关键词,以便更轻松地找到扩展。这些关键词与市场上的其他扩展标签一起列出。此列表目前限制为 5 个关键词。
galleryBanner object 帮助格式化市场标题以匹配你的图标。请参阅下面的详细信息。
preview boolean 将扩展设置为在市场上被标记为预览。
main string 扩展的入口点。
browser string 你的 Web 扩展 的入口点。
contributes object 一个对象,描述扩展的 贡献
activationEvents array 一个数组,包含此扩展的 激活事件
badges array 在市场扩展页面侧边栏中显示的 已批准 的徽章的数组。每个徽章都是一个包含 3 个属性的对象:url 用于徽章的图像 URL、href 用于用户点击徽章时将要跳转的链接以及 description
markdown string 控制市场中使用的 Markdown 渲染引擎。可以是 github(默认)或 standard
qna marketplace(默认)、stringfalse 控制市场中的问答链接。设置为 marketplace 以启用默认的市场问答站点。设置为字符串以提供自定义问答站点的 URL。设置为 false 以完全禁用问答。
sponsor object 指定用户可以赞助你的扩展的位置。这是一个包含单个属性 url 的对象,该属性链接到用户可以赞助你的扩展的页面。
dependencies object 你的扩展需要的任何运行时 Node.js 依赖项。与 npm 的 dependencies 完全相同。
devDependencies object 你的扩展需要的任何开发 Node.js 依赖项。与 npm 的 devDependencies 完全相同。
extensionPack array 一个包含可以一起安装的扩展 ID 的数组。扩展的 ID 始终是 ${publisher}.${name}。例如:vscode.csharp
extensionDependencies array 一个包含此扩展依赖的扩展 ID 的数组。扩展的 ID 始终是 ${publisher}.${name}。例如:vscode.csharp
extensionKind array 一个数组,指示扩展应该在哪些远程配置中运行。值是 ui(在本地运行)、workspace(在远程机器上运行)或两者,顺序设置优先级。例如:[ui, workspace] 表示扩展可以在任何一个位置运行,但更喜欢在本地机器上运行。请参阅 此处 以了解详细信息。
scripts object npm 的 scripts 完全相同,但包含额外的 VS Code 特定字段,例如 vscode:prepublishvscode:uninstall
icon string 至少 128x128 像素(对于 Retina 屏幕,为 256x256 像素)的图标的路径。
pricing string 扩展的定价信息。允许的值:FreeTrial。默认值:Free。请参阅 此处 以了解详细信息。
capabilities object 一个对象,描述扩展在有限工作区中的功能: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": "[email protected]"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/microsoft/vscode-wordcount.git"
  },
  "homepage": "https://github.com/microsoft/vscode-wordcount/blob/main/README.md"
}

市场展示技巧

以下是一些技巧和建议,可以使你的扩展在 VS Code 市场 上显示时看起来很棒。

始终使用最新的 vsce,因此 npm install -g @vscode/vsce 确保你拥有它。

在你的扩展的根文件夹中有一个 README.md Markdown 文件,我们会将内容包含在扩展详细信息(在市场上)的主体中。你可以在 README.md 中提供相对路径的图像链接。

以下是一些示例

  1. 字数统计
  2. MD 工具

提供一个好的显示名称和描述。这对于市场和产品显示很重要。这些字符串还用于 VS Code 中的文本搜索,拥有相关的关键词将非常有用。

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

图标和对比鲜明的横幅颜色在市场页面标题上看起来很棒。theme 属性是指要在横幅中使用的字体 - darklight

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

你可以设置几个可选链接(bugshomepagerepository),这些链接会在市场的资源部分下显示。

{
  "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": "[email protected]"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/microsoft/vscode-wordcount.git"
  }
}
市场资源链接 package.json 属性
问题 bugs:url
存储库 repository:url
主页 homepage
许可证 license

为你的扩展设置一个 category。同一 category 中的扩展会在市场上分组在一起,这将改善过滤和发现。

注意:只使用对你的扩展有意义的值。允许的值是 [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.bintray.com
  • api.travis-ci.com
  • api.travis-ci.org
  • app.fossa.io
  • badge.buildkite.com
  • badge.fury.io
  • badge.waffle.io
  • badgen.net
  • badges.frapsoft.com
  • badges.gitter.im
  • badges.greenkeeper.io
  • cdn.travis-ci.com
  • cdn.travis-ci.org
  • 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
  • gemnasium.com
  • github.com (仅限于工作流程)
  • gitlab.com
  • godoc.org
  • goreportcard.com
  • img.shields.io
  • isitmaintained.com
  • marketplace.visualstudio.com
  • nodesecurity.io
  • opencollective.com
  • snyk.io
  • travis-ci.com
  • travis-ci.org
  • visualstudio.com
  • vsmarketplacebadges.dev
  • www.versioneye.com

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

如果您想使用其他徽章,请打开 GitHub 问题,我们很乐意查看。

组合扩展贡献

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 文件时处于活动状态。

扩展包

您可以将单独的扩展捆绑到扩展包中。扩展包是一组将一起安装的扩展。这使得您可以轻松地与其他用户共享您喜欢的扩展,或者为特定场景(如 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 生成器并选择新的扩展包选项。您可以选择使用您当前在 VS Code 实例中安装的扩展集来填充包。这样,您可以轻松地创建包含您喜欢的扩展的扩展包,将其发布到 Marketplace,并与他人共享。

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

扩展卸载钩子

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

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

当扩展从 VS Code 中完全卸载时,此脚本将被执行,此时 VS Code 将在卸载扩展后重新启动(关闭并启动)。

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

有用的 Node 模块

npm 上提供了一些可用于编写 VS Code 扩展的 Node.js 模块。您可以在扩展的 dependencies 部分中包含这些模块。

下一步

要详细了解 VS Code 可扩展性模型,请尝试以下主题