vscode插件开发

目录

插件在 VSCode 中能做什么

1、发布应用市场

1、申请Microsoft账号

2、创建Azure DevOps组织

3、创建令牌

 4、创建发布账号

 5、发布应用市场

 2、本地打包不发布

1、本地打包

 2、导入应用商店

​编辑

3、插件开发前的环境准备

2、项目初始化

3、运行项目

4、文件介绍 

1、package.json

1、main

2、activationEvents

3、contributes

2、extension.js

activate：这是插件被激活时执行的函数

deactivate：这是插件被销毁时调用的方法，比如释放内存等。

5、实战-小试牛刀

1、package.json

2、extension.ts文件 

6、webview详解Webview API | Visual Studio Code Extension API

1、实现一个简单的webview功能

2、加载本地资源

1、线引入头文件

2、替换路径

3、执行函数

3、消息通信

 1、实现消息发送：

2、简单通信封装

4、生命周期

5、实现webiew的状态保持

 6、调试

7、菜单

1、菜单出现的位置

 2、菜单出现的条件when

 3、控制菜单的分组和排序group

1、editor/context中的默认组：

 2、explorer/context中的默认组：

---

插件在 VSCode 中能做什么

• 主题
  • 界面和文本(TextMate 语法)主题色
  • 图标样式
• 通用功能
  • 添加命令
  • 添加配置项
  • 添加快捷键
  • 添加菜单项
  • 添加右键菜单
  • 从文本输入框获取输入(QuickPick)
  • 存储数据(localStorage)
• 工作区扩展
  • 活动栏项目
  • 显示提示框
  • 状态栏信息
  • 显示进度条
  • 打开文件
  • 显示网页(web view)
• 程序语言
  • 实现新语言的高亮
  • 实现新语言的调试器
  • 代码库管理
  • 定义和执行 Task
  • 定义 snippet

1、发布应用市场

对于一个初学者来说，我们先了解下vscode的应用市场，做好开发前的准备工作

Visual Studio Code的应用市场基于微软自己的Azure DevOps，插件的身份验证、托管和管理都是在这里。

• 要发布到应用市场首先得有应用市场的publisher账号；
• 而要有发布账号首先得有Azure DevOps组织；
• 而创建组织之前，首先得创建Azure账号；
• 创建Azure账号首先得有Microsoft账号；

我们来梳理下：

• 一个Microsoft账号可以创建多个Azure组织；
• 一个组织可以创建多个publisher账号；
• 同时一个组织可以创建多个PAT（Personal Access Token，个人访问令牌）；

1、申请Microsoft账号

访问 Sign in to your Microsoft account 登录你的Microsoft账号，没有的先注册一个

2、创建Azure DevOps组织

访问： https://aka.ms/SignupAzureDevOps

 点击继续，默认会创建一个以邮箱前缀为名的组织。

3、创建令牌

进入组织的主页后，点击右上角的Security，点击创建新的个人访问令牌，这里特别要注意Organization要选择all accessible organizations，Scopes要选择Full access，否则后面发布会失败。

 

创建令牌成功后你需要本地记下来，因为网站是不会帮你保存的，后面有可能会用到，如果没保存，后面需要用到的话，就只能重新创建令牌了

 4、创建发布账号

访问https://aka.ms/vscode-create-publisher

 保存无反应，可以f12看下控制台报什么错误，如果是无法加载recaptcha，可以下载安装火狐浏览器，使用firefox浏览器下载插件https://www.wpsshop.cn/w/2023面试高手/article/detail/644353