第一个vscode插件

158 阅读2分钟
  1. 安装脚手架 npm install -g yo generator-code
  2. 创建一个自己的代码 yo code

image.png 等待他自己生成 3. 在弹出的编辑器里 按F5 他会自动编译 并弹出一个调试窗口

image.png 4. 在调试的vscode窗口中 Ctrl + Shift + P,并输入 Hello World

image.png 5. 弹出

image.png 6. 注意有的时候Ctrl + Shift + P 找不到Hello World 是因为package.json 文件中指定的 vscode 版本号 跟你 编译器vscode的版本不一致

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

image.png

image.png

image.png

  1. 使用 vsce 打成 vsix 插件 npm i vsce -g
  2. 打包生成 .vsix 文件 vsce package 如果版本不一致哪一步没有升级编译器 而是手动改了 版本号 这步就会失败 解决办法就是升级到最新编辑器 然后重新创建项目
  3. 打包好的文件就可以自己安装到本地测试了

image.png

  1. 然后在vscode官网 marketplace.visualstudio.com/

image.png

  1. 创建一个新的发布者

image.png

image.png

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