likes
comments
collection

一个简单的vscode插件从创建到发布的全过程

作者站长头像
站长
· 阅读数 11

写在前面

vscode插件开发听起来是一件头疼的事,但讲整个环节理清后会发现上手并没有想象中的困难。

本篇文章以代码片段类型插件为例,简单讲一下插件从项目创建到开发再到上线的全过程。

除此类型之外,插件的玩法比羊了个羊的排列方式还要多,大家可自行研究体验~

创建插件

安装脚手架

npm install -g yo generator-code  或
yarn global add yo generator-code

生成项目

我们选择代码片段 Code Snippets 类型的脚手架即可

yo code

一个简单的vscode插件从创建到发布的全过程

快速填写项目名称 描述等 一个简单的vscode插件从创建到发布的全过程

目录

一个简单的vscode插件从创建到发布的全过程

插件开发

添加配置选项

在package.json文件中,添加语言类型和代码片路径。

ps.javascriptreact为jsx

"contributes": {
        "snippets": [
            {
               "language": "javascript",
               "path": "./snippets/snippets.code-snippets"
            },
            {
              "language": "typescript",
              "path": "./snippets/snippets.code-snippets"
            },
            {
              "language": "javascriptreact",
              "path": "./snippets/snippets.code-snippets"
            }
        ]
    }

编写代码片段

{
  "demo-name": {
      "prefix": "代码片段提示",
      "body": [
          "片段体"
        ],
      "description": "代码片段描述"
  }
}

插件测试

点击vscode调试,然后点击开始调试

一个简单的vscode插件从创建到发布的全过程

输入demo-name

一个简单的vscode插件从创建到发布的全过程

回车

一个简单的vscode插件从创建到发布的全过程

测试成功

插件发布

打包

安装工具

npm install -g vsce 或
yarn global add vsce

执行打包命令

vsce package

ps.打完包后,项目内会生成vsix文件,直接放入vscode扩展中即可使用。

如果个人或涉密,可以使用这种方式,无需发布到应用市场。

发布

  1. 注册微软账号,如果有可直接登录 login.live.com/
  2. 访问aka.ms/SignupAzure… 如果从未使用过Azure,会有下面的弹窗,点击continue即可

一个简单的vscode插件从创建到发布的全过程

3.点击右上角个人设置如图进行操作

一个简单的vscode插件从创建到发布的全过程

4.创建一个新token,按照标红的选项选择,否则发布会出错

一个简单的vscode插件从创建到发布的全过程

创建完成后记住自己的token

5.创建一个发布者

marketplace.visualstudio.com/manage

点击 create-publisher

填入你的姓名,会自动生成id

6.vscode中绑定发布者账号

输入命令vsce login your-publisher-name登录账号 之后会提示输入token,即4中生成的token

7.package.json中绑定publisher

"publisher": "your-publisher-name"

一个简单的vscode插件从创建到发布的全过程

8.发布

vsce publish

大约几分钟后就能在vscode中搜到自己的插件啦!

参考

juejin.cn/post/699287…

blog.haoji.me/vscode-plug…

code.visualstudio.com/api/referen…

最后

此文章只是一个小demo跑通了上线流程

对文章有建议、意见

或者开发过程中有什么问题可随时交流~