VSCode 插件开发入门

迷南。 2022-12-27 15:28 302阅读 0赞

[官方文档][Link 1]

安装Yeoman 和 VS Code Extension Generator

npm install -g yo generator-code

执行命令：yo code

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70][]

根据提示输入信息。

生成的目录如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70 1][]

运行：打开调试窗口  也可以直接按 F5

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70 2][]

会打开个新窗口（如果弹出新窗口失败可以试试安装 *TypeScript + Webpack Problem Matchers* 插件试试）

按 CTRL + SHIFT + P 输入 hello world，选择并回车

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70 3][]

会看到最下面的提示

![20201212174822354.png][]  
**打包发布插件**

注册一个Microsoft账号：`https://marketplace.visualstudio.com/`

登录后，点击右上角的用户名

![20201212221310847.png][]

创建一个组织

第一个continue是选择同意条款，第二个continue上面的输入框输入组织名，下面默认即可

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70 4][]

创建一个新项目

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70 5][]

获取个人访问令牌  
vsce只能使用个人访问令牌发布扩展

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70 6][]

新建令牌

![20201212222352186.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70 7][]

有效期最长时间一年，Origanization要选All accessible origanizations每个组织都可以访问它，Scopes选Full access允许所有访问

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70 8][]

创建后的token，一定要自己记住，网站不会记录，只显示一次，每次发布插件或者迭代更新的时候都要输入这个token

vsce是用于打包，发布和管理VS代码扩展的命令行工具

npm install -g vsce

创建发布者：[https://aka.ms/vscode-create-publisher][https_aka.ms_vscode-create-publisher]

vsce create-publisher yunan(发布者名)

![20201212223921533.png][]

package.json 里加入 publisher 设置

"publisher": "yunan",

README.md 里的 http 地址要换成 https

vsce package

但是还是报错：Make sure to edit the README.md file before you package or publish your extension.

发现是因为一行的字数太多了，没办法暂时先改短一些吧

![20201212232627545.png][]

打包成功生成 hello-0.0.1.vsix 文件

vsce publish

![20201212233441526.png][]

发布成功

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70 9][]

[Link 1]: https://code.visualstudio.com/api/get-started/your-first-extension
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70]: /images/20221120/5d8036ba239b4a818cdeaf62da2b2cc3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70 1]: /images/20221120/02ae23cc0e2b4358a1374eb410769679.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70 2]: /images/20221120/3b08ebcece844a879c68939527888aee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70 3]: /images/20221120/f6f24d76939349a59b9ad990c5730d8c.png
[20201212174822354.png]: /images/20221120/357888175bc14f30a9ea14b9dedc14a5.png
[20201212221310847.png]: /images/20221120/8517dc5a371d4892b689093709504de6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70 4]: /images/20221120/9816fd73cc784f1c80a18c09fd5fc3f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70 5]: /images/20221120/069fbc15a8ff493db19bbb24be8b62ae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70 6]: /images/20221120/8000c73e5bc54d94a093cc316d560032.png
[20201212222352186.png]: /images/20221120/0ec8e5d4630d479e800577b627760a22.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70 7]: /images/20221120/11542f21d2d94a7dbab399eb95908d22.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70 8]: /images/20221120/9c0147fd26654883870e024c1db69390.png
[https_aka.ms_vscode-create-publisher]: https://aka.ms/vscode-create-publisher
[20201212223921533.png]: /images/20221120/dca84447f5b94e8fb6d8c603cecb522a.png
[20201212232627545.png]: /images/20221120/a57a712a261d4df7b765ffcc5d1c56fe.png
[20201212233441526.png]: /images/20221120/31ff2084e40d4492a148f3b3c7fa067e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70 9]: /images/20221120/4518b944595a4038a09c91e398dae052.png