尝试以扩展 VS Code 中的代理模式!

扩展清单

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

字段

名称 必需 类型 详细信息
name Y 字符串 扩展的名称 - 应该是全小写,不带空格。
名称在 Marketplace 中必须是唯一的。
版本 Y 字符串 SemVer 兼容版本。
发布者 Y 字符串 发布者标识符
引擎 Y 对象 一个对象,至少包含 vscode 键,其值与扩展兼容的 VS Code 版本匹配。不能是 *。例如:^0.10.5 表示与最低 VS Code 版本 0.10.5 兼容。
许可证 字符串 请参阅 npm 的文档。如果您的扩展根目录中有 LICENSE 文件,则 license 的值应为 "SEE LICENSE IN <filename>"
displayName 字符串 在 Marketplace 中显示的扩展名称。
显示名称在 Marketplace 中必须是唯一的。
描述 字符串 您的扩展的简短描述及其功能。
categories string[] 您想用于扩展的类别。允许的值:[编程语言, 代码片段, 代码检查器, 主题, 调试器, 格式化程序, 键位映射, SCM 提供程序, 其他, 扩展包, 语言包, 数据科学, 机器学习, 可视化, 笔记本, 教育, 测试]
关键词 数组 一个关键词数组,以便更容易找到扩展。这些关键词与 Marketplace 上的其他扩展标签一起包含在内。此列表目前限制为 30 个关键词。
galleryBanner 对象 帮助格式化 Marketplace 标题以匹配您的图标。详见下文。
preview 布尔值 将扩展设置为在 Marketplace 中标记为预览版。
字符串 您扩展的入口点。
浏览器 字符串 您的Web 扩展的入口点。
contributes 对象 描述扩展贡献的对象。
activationEvents 数组 此扩展的激活事件数组。
badges 数组 在 Marketplace 扩展页面的侧边栏中显示的已批准徽章数组。每个徽章都是一个包含 3 个属性的对象:徽章图片 URL 的 url、用户点击徽章时将跟随的链接的 hrefdescription
Markdown 字符串 控制 Marketplace 中使用的 Markdown 渲染引擎。可以是 github(默认)或 standard
问答 marketplace(默认)、stringfalse 控制 Marketplace 中的问答链接。设置为 marketplace 以启用默认的 Marketplace 问答网站。设置为字符串以提供自定义问答网站的 URL。设置为 false 以完全禁用问答。
赞助 对象 指定用户可以赞助您扩展的位置。这是一个包含单个属性 url 的对象,该属性链接到用户可以赞助您扩展的页面。
依赖项 对象 您的扩展所需的任何运行时 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] 表示扩展可以在任一位置运行,但更倾向于在本地机器上运行。有关更多详细信息,请参阅此处
脚本 对象 npm 的 scripts 完全相同,但包含额外的 VS Code 特定字段,例如 vscode:prepublishvscode:uninstall
图标 字符串 图标的路径,至少 128x128 像素(Retina 屏幕为 256x256)。
定价 字符串 扩展的定价信息。允许的值:免费试用。默认:免费。有关更多详细信息,请参阅此处
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. 字数统计
  2. MD 工具

提供一个好的显示名称和描述。这对于 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 的资源部分下。

{
  "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 属性
问题 bugs:url
仓库 repository:url
主页 homepage
许可证 许可证

为您的扩展设置一个 category。同一 category 中的扩展在 Marketplace 上会分组显示,这有助于过滤和发现。

注意: 只使用对您的扩展有意义的值。允许的值有 [编程语言, 代码片段, 代码检查器, 主题, 调试器, 格式化程序, 键位映射, SCM 提供程序, 其他, 扩展包, 语言包, 数据科学, 机器学习, 可视化, 笔记本, 教育, 测试]。对于语法高亮和代码补全等通用语言功能,请使用 编程语言语言包 类别保留用于显示语言扩展(例如,本地化的保加利亚语)。

{
  "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 上提交问题,我们乐意查看。

组合扩展贡献

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 现在也会安装其扩展依赖项。

扩展包应归类到 扩展包 Marketplace 类别中

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

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

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

扩展卸载钩子

如果您的扩展在从 VS Code 卸载时需要进行一些清理工作,您可以在扩展的 package.json 中的 scripts 部分下,将 Node.js 脚本注册到卸载钩子 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 可扩展性模型的更多信息,请尝试以下主题