1. 安装脚手架
    npm install -g yo generator-code
  2. 创建一个自己的代码
    yo code
    image.png
    等待他自己生成
  3. 在弹出的编辑器里 按F5 他会自动编译 并弹出一个调试窗口

image.png

  1. 在调试的vscode窗口中 Ctrl + Shift + P,并输入 Hello World
    image.png
  2. 弹出
    image.png
  3. 注意有的时候Ctrl + Shift + P 找不到Hello World 是因为package.json 文件中指定的 vscode 版本号 跟你 编译器vscode的版本不一致

    image.png

    一种可以修改这个版本号 让他跟你的编译器版本一致 一种是把编译器升级到最新的然后再创建项目 个人建议第二种 因为后面打包的时候也会因为版本不一致导致打包失败

  4. 在这个文件中编辑你自己的逻辑

image.png

image.png

image.png

  1. 使用 vsce 打成 vsix 插件
    npm i vsce -g
  2. 打包生成 .vsix 文件
    vsce package
    如果版本不一致哪一步没有升级编译器 而是手动改了 版本号 这步就会失败 解决办法就是升级到最新编辑器 然后重新创建项目
  3. 打包好的文件就可以自己安装到本地测试了
    image.png
  4. 如果想要发布到插件市场需要你注册Azure DeOps账号 前提是你有一个Microsoft账号
    Azure DeOps: https://aka.ms/SignupAzureDevOps
    Microsoft: https://login.live.com/
  5. 然后在vscode官网 https://marketplace.visualstudio.com/

image.png

  1. 创建一个新的发布者
    image.png
    image.png

image.png
在这选择 Visual Studio Code
image.png
上传你打包好的.vsix 文件就可以了 大部分会失败 因为他需要你项目里的package.json 文件里要有
"publisher": "这里就是我上面提到的id",
发布者信息 然后填写完 在打包再上传到这就可以了 等几分钟审核通过 就可以在插件市场找到自己的插件了
至此 大功告成


xxnobug
34 声望1 粉丝