概述

插件功能

• 改变VS Code的颜色和图标主题——主题

• 在UI中添加自定义组件和视图——扩展工作台

• 创建Webview，使用HTML/CSS/JS显示自定义网页——Webview指南

• 支持新的编程语言——语言插件概览

• 支持特定运行时的调试——调试插件指南

开始

安装

vscode官方提供了插件开发的脚手架工具。

开发调试

通过侧边栏中的运行和调试 来调试插件。

其中type 字段就是表示以插件宿主模式来启动调试器。

preLaunchTask 字段表示在启动调试器之前执行的Vscode Task 这里采用变量 表示运行默认的task 。

.vscode/task.json

注意： 虽然代码是以watch模式编译，会进行热更新。 但是调试窗口仍然需要重启运行的才是最新的插件

建议通过 Ctrl+Shift+P 执行 restart extension host 命令来重启调试窗口， 这样相对快一些

插件目录结构

首先主要关注package.json和extension.ts 两个文件

插件配置

每个VS Code插件都必须包含一个package.json，它就是插件的配置清单。package.json混合了Node.js字段，如：scripts、dependencies，还加入了一些VS Code独有的字段，如：publisher、activationEvents、contributes等。关于这些VS Code字段说明都在插件清单参考中可以找到。

插件入口

插件入口文件会导出两个函数，activate 和 deactivate，你注册的激活事件被触发之时执行activate，deactivate则提供了插件关闭前执行清理工作的机会。

注意： vscode并不会存在于node_modules中， 它是vscode编辑器内置的一个包。 因此在ts中我们还需要安装@types/vscode来获取代码提示。

发布

vsce是一个官方提供的用于将插件发布到市场上的命令行工具。

发布教程

发布工具会检查以下内容：

• pacakge.json文件中的 icon 不可以是 SVG。

• pacakge.json中的徽章不可以是 SVG，除非来自于可靠的图标来源

• README.md和CHANGELOG.md中的图片链接需要使用https协议

• README.md和CHANGELOG.md中的图片不可以是 SVG，除非来自可靠的图标来源

Step.1 准备一个Azure DevOps Token

VS Code 插件市场的服务是Visual Studio Team Services提供的，因此验证、代理、管理插件都是由这个服务提供的。

vsce只能用Personal Access Tokens发布插件，所以至少要创建一个 Token 以便发布插件。

• 首先进入Azure Devops首页登录账号，注册、登录流程就不再赘述。

• 登录后回到刚才的首页 点击免费开始使用

• 进入工作区后， 点击右上角 User Settings ⇒ Personal access tokens

• 然后点击 New Token

创建这个token既然是为了发布，那建议scope直接选择Full access； organization直接选all

此时会生成一个token， 注意记录一下token， 因为之后就看不了了,只能重新生成。

• 如果选择Custom defined 一定要更改token的Marketplace权限 (很重要 否则vsce无法发布)

Step.2 创建发行者

进入vscode插件市场 依然右上角登录

登录后，点击Publish extensions ⇒ 点击 Create publisher

然后输入name就行， name类似ID也是不可重复的。

Step.3 使用Vsce发行插件

vsce login [publisher-name]

然后输入 刚才创建的 Personal Access Token

登录成功后 vsce publish 即可

Demo

1. 代码提示功能： 支持将项目中locale目录下的json文件 转换为代码提示。

1. 搜索功能： 支持在文件内 通过搜索英文来直接定位到相应位置， 例如128行使用了$t(’public.ok’)

那么只需要执行插件 搜索 OK 就能自动定位到128行

Prev

浅浅吐槽一下VueUse

Next

CodeEditor的部署流程