在 VS Code 中试用

扩展清单

每个 Visual Studio Code 扩展都需要在扩展目录结构的根部有一个清单文件 package.json

字段

名称 必填 类型 详细信息
name string 扩展的名称 - 应全小写,无空格。
该名称在市场中必须是唯一的。
version string SemVer 兼容版本。
publisher string 发布者标识符
engines object 一个对象,其中至少包含一个 vscode 键,用于匹配扩展兼容的 VS Code 版本。不能为 *。例如:^0.10.5 表示兼容最低版本为 0.10.5 的 VS Code。
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 像素(视网膜屏幕为 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": "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"
}

市场展示技巧

以下是一些提示和建议,可帮助你的扩展在 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": "sean@contoso.com"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/microsoft/vscode-wordcount.git"
  }
}
市场资源链接 package.json 属性
问题 bugs:url
仓库 repository:url
主页 homepage
许可证 license

为你的扩展设置一个类别。同一类别下的扩展在市场中会被分组在一起,这有助于改进过滤和发现。

**注意:**仅使用对你的扩展有意义的值。允许的值为 [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(仅限 Workflows)
  • 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

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

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

合并扩展贡献点

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

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

下面是一个扩展清单,其中包含 LaTeX 语言定义(语言 ID 和文件扩展名)、着色 (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,以便在市场中轻松发现和过滤。

**提示:**确保你的合并贡献点使用相同的标识符。在上面的示例中,所有三个贡献点都使用“latex”作为语言 ID。这会让 VS Code 知道着色器 (grammars) 和代码片段是用于 LaTeX 语言的,并在编辑 LaTeX 文件时激活它们。

扩展包

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

扩展包使用 package.json 文件中的 extensionPack 属性来捆绑其他扩展。

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

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

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

扩展包应归类到市场中的 Extension Packs 类别。

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

要创建扩展包,可以使用 yo code Yeoman 生成器并选择**新建扩展包**选项。有一个选项可以使用你当前在 VS Code 实例中安装的扩展集来填充扩展包。通过这种方式,你可以轻松创建包含你喜爱的扩展的扩展包,将其发布到市场,并与他人分享。

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

扩展卸载钩子

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

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

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

**注意**:仅支持 Node.js 脚本。

有用的 Node 模块

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

后续步骤

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