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

写在前面

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

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

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

创建插件

安装脚手架

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

生成项目

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

yo code

快速填写项目名称 描述等

目录

插件开发

添加配置选项

在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调试，然后点击开始调试

输入demo-name

回车

测试成功

插件发布

打包

安装工具

npm install -g vsce 或
yarn global add vsce

执行打包命令

vsce package

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

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

发布

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

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

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

创建完成后记住自己的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"

8.发布

vsce publish

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

参考

juejin.cn/post/699287…

blog.haoji.me/vscode-plug…

code.visualstudio.com/api/referen…

最后

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

对文章有建议、意见

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