从零开始编写VSCODE插件1-创建和发布篇

风风吹
757 阅读3分钟

一、创建

首先我们要安装官方的generator-codecli进行插件的创建

npm install --global yo generator-code

yo code

在全局安装完cli后，执行yo code运行cli。

然后根据交互式系统，选择相应选项进行初始化创建：

# ? What type of extension do you want to create? New Extension (TypeScript)
# ? What's the name of your extension? HelloWorld
### Press <Enter> to choose default for all options below ###

# ? What's the identifier of your extension? helloworld
# ? What's the description of your extension? LEAVE BLANK
# ? Initialize a git repository? Yes
# ? Bundle the source code with webpack? No
# ? Which package manager to use? npm

# ? Do you want to open the new folder with Visual Studio Code? Open with `code`

在编辑器中，打开 src/extension.ts 并按 F5 或从命令面板（Ctrl+Shift+P）运行 Debug: Start Debugging 命令。这将在一个新的扩展开发宿主窗口中编译并运行扩展。

在新窗口中从命令面板（Ctrl+Shift+P）运行 Hello World 命令：

你应该会看到来自 HelloWorld! 的 Hello World 通知弹出。成功！

如果你在调试窗口中看不到 Hello World 命令，请检查 package.json 文件，并确保 engines.vscode 版本与安装的 VS Code 版本兼容。

二、发布

一旦你制作了一个高质量的扩展，你可以将其发布到 VS Code 扩展市场，以便其他人可以找到、下载并使用你的扩展。或者，你可以将一个扩展打包成可安装的 VSIX 格式，并与其他用户分享。

本主题包括：

使用 vsce，VS Code 扩展的命令行工具 打包、发布和取消发布扩展 注册发布扩展所必需的发布者。

获取个人的Access Token

首先，要在Azure DevOps里创建你自己的组织。 learn.microsoft.com/azure/devop…

然后在你的组织主页，打开个人设置，下拉，选择个人访问令牌Personal access tokens

image.png

在个人访问令牌页面，选择创建新令牌。

创建一个发布者

发布者是可以将扩展发布到 Visual Studio Code 市场的身份。每个扩展都需要在其 package.json 文件中包含一个发布者标识符。

创建发布者：

  1. 前往 Visual Studio 市场的发布者管理页面。 marketplace.visualstudio.com/manage/crea…

  2. 使用 Microsoft 账户登录。

  3. 点击左侧面板中的“创建发布者”。

  4. 在新页面中，为新发布者指定必填参数 - 标识符和名称（分别为 ID 和 Name 字段）：

ID：你的发布者在市场中的唯一标识符，将用于你的扩展 URL 中。ID 一旦创建将无法更改。 Name：你的发布者在市场中显示的唯一名称，可以是你的公司或品牌名称。

  1. 填写其余可选字段。

  2. 点击“创建”

  3. 使用 vsce 验证新创建的发布者。在终端中运行以下命令，当提示时，输入上一步骤中创建的个人访问令牌：

vsce login <publisher id>

https://marketplace.visualstudio.com/manage/publishers/
Personal Access Token for publisher '<publisher id>': ****************************************************

The Personal Access Token verification succeeded for the publisher '<publisher id>'.

发布者 <publisher id> 的个人访问令牌验证成功。 一旦验证通过，你就准备好发布扩展了。

需要注意的是，创建token后，需要自己找个地方记下来，因为Azure DevOps的后台没有查看token的地方，如果忘记了只能重新创建新的token。 Azure DevOps后台地址： https://dev.azure.com/1351686735/_usersSettings/tokens

注意 注册发布者时，需要用到谷歌的验证插件，如果没有翻墙的同学，可能会报grecaptcha is not defined而无法创建发布者，此时可以在谷歌或者火狐浏览器安装Header Editor插件来解决，具体教程请看： huaweicloud.csdn.net/63a570d0b87…

vsce

vsce，即“Visual Studio Code Extensions”的简称，是一个用于打包、发布和管理 VS Code 扩展的命令行工具。

npm install -g @vscode/vsce

用法

你可以通过vsce非常简单得进行打包和发布： 需要注意的是，以下命令不能在git bash上输，否则会报找不到publisher（原因不明）。 建议在cmd上输命令

$ cd myExtension
$ vsce package
$ vsce login <publisher name>
$ vsce publish

出于安全方面的考虑，发布的插件不能包含svg。

avatar
文章
阅读
粉丝