vscode插件开发

后来的后来5555
193 阅读6分钟

大家对vscode肯定都不陌生，其是微软推出的一款轻量级代码编辑器，在使用的时候总会时不时的安装一些插件来协助我们开发，这些插件就是利用vscode给我们开放的一些API的基础上进行扩展功能的开发，从而解决开发中的一些问题，提高生产效率。 这种插件化思想一方=面使该代码编辑器更轻量化；另一方面能够充分利用社区的力量，为其提供更加多元化的插件。

插件能做什么？

  • 提供新主题（包括编辑器配色，文件图标等等）
  • 支持新编程语言的语法（提供高亮，代码补全，错误检查等等功能）
  • 提供程序调试功能
  • 自定义命令，快捷键，菜单，右键菜单...
  • 自定义工作区 Webview

等等

1.初始化

官方为了方便开发人员进行vscode插件的开发，提供了对应的脚手架来生成对应的项目。

下面的命令安装了两个包，yo和generator-code，这两个包的用途如下：

  • yo模块全局安装后就安装了Yeoman，Yeoman是通用型项目脚手架工具，可以根据一套模板，生成一个对应的项目结构
  • generator-code模块是VS Code扩展生成器，与yo配合使用才能构建项目。
npm install -g yo generator-code

yo code

yo code命令执行后：

首先会让你选择你想创建的插件类型，目前支持以下几种类型：

  • New Extension (TypeScript) ：ts语法，内置了hello world的命令
  • New Extension (JavaScript) : js语法，内置了hello world的命令
  • New Color Theme ：主题项目，内置了主题，可用来自定义主题
  • New Language Support：语言支持项目，内置了语法支持配置，可用来支持特殊语言
  • New Code Snippets：代码片段项目，内置了代码片段配置，可用来配置代码片段，输入触发字符，快速生成代码片段
  • New Keymap：快捷键项目，内置了快捷键配置，可用来自定义快捷键行为
  • New Extension Pack：插件集合项目，内置了插件集合配置，可用于定制插件集，达到快速安装一组插件
  • New Language Pack (Localization）

接着依次录入插件名称、插件标识、插件描述、是否初始化为git仓库、是否需要webpack打包、使用的包管理器（npm/yarn）：

以上，我们就得到了一个简易的插件项目。

2.项目架构

{
	"name": "vscodeplugindemo",// 插件名
	"displayName": "vscodePluginDemo",// 显示在应用市场中的名字
	"description": "",// 插件描述
	"version": "0.0.1",
	"engines": {
		"vscode": "^1.69.0"  // 最低支持的vscode版本
	},
	"categories": [
		"Other" // 扩展的类别
	],
  // 激活事件组，何时激活插件
	"activationEvents": [
		"onCommand:vscodeplugindemo.helloWorld"
	],
  // 入口文件
	"main": "./extension.js",
  // 定制插件功能
	"contributes": {
		"commands": [
			{
				"command": "vscodeplugindemo.helloWorld",
				"title": "Hello World"
			}
		]
	},
	"scripts": {
		"lint": "eslint .",
		"pretest": "npm run lint",
		"test": "node ./test/runTest.js"
	},
  // 开发依赖
	"devDependencies": {
		"@types/vscode": "^1.69.0",
		"@types/glob": "^7.2.0",
		"@types/mocha": "^9.1.1",
		"@types/node": "16.x",
		"eslint": "^8.18.0",
		"glob": "^8.0.3",
		"mocha": "^10.0.0",
		"typescript": "^4.7.4",
		"@vscode/test-electron": "^2.1.5"
	}
}

解读：

main：定义了整个插件的入口文件。

contributes.commands：注册了一个名为vscodeplugindemo.helloWorld的命令。

activationEvents：仅是注册了命令，但vscode还不知道何时执行，需要在activationEvents中添 加"onCommand:vscodeplugindemo.helloWorld"来告诉vscode，当执行这个命令时执行我们定义的内容。

注：第一个案例演示

// 指明该插件在何种情况下才会被激活，
onLanguage:${language} // 打开解析为特定语言文件时被激活，例如"onLanguage:javascript"
onCommand:${command} // 调用命令时被激活 
onDebug //  在启动调试话之前被激活
workspaceContains:${toplevelfilename} // 当打开文件夹并且该文件夹包含至少一个与 glob 模式匹配的文件时
onFileSystem:${scheme} // 当读取来自特定方案的文件或文件夹时
onView:${viewId} // 当在 VSCode 侧栏中展开指定 id 的视图
onUri
onWebviewPanel
onCustomEditor
onAuthenticationRequest
* // 只要启动vscode，插件就会被激活（不建议使用）

commands：命令
menus：菜单
keybindings：快捷键绑定
languages：新语言支持
snippets：代码片段

configuration：设置
debuggers：调试
breakpoints：断点
grammars
themes：主题
jsonValidation：自定义JSON校验
views：左侧侧边栏视图
viewsContainers：自定义activitybar
problemMatchers
problemPatterns
taskDefinitions
colors

editor/context //编辑器上下文菜单
explorer/context // 资源管理器上下文菜单
editor/title // 编辑标题菜单栏
editor/title/context // 编辑器标题上下文菜单

debug/callstack/context // 调试callstack视图上下文菜单
scm/title // SCM标题菜单
scm/resourceGroup/context // SCM资源组菜单
scm/resource/context // SCM资源菜单
scm/change/title // SCM更改标题菜单
view/title // 左侧视图标题菜单
view/item/context // 视图项菜单
commandPalette // 控制命令是否显示在命令选项板中

{
  "command": "commandid",
  "when": "",
  "group": "",
  "alt": ""
}

when语法:
resourceLangId == javascript  // 当编辑的文件是js文件时；
resourceFilename == test.js // 当当前打开文件名是test.js时；
isLinux、isMac、isWindows  // 判断当前操作系统；
editorFocus // 编辑器具有焦点时；
editorHasSelection // 编辑器中有文本被选中时；
view == someViewId // 当当前视图ID等于someViewId时；
等等

// 控制菜单的分组和排序

1.组间排序
explorer/context：
navigation // 放在这个组的永远排在最前面；
workspace // 与工作空间操作相关的命令。
compare // 与差异编辑器中的文件比较相关的命令。
search // 与在搜索视图中搜索相关的命令。
cutcopypaste // 与剪切，复制和粘贴文件相关的命令。
modification // 与修改文件相关的命令。

editor/title：
1_diff // 与使用差异编辑器相关的命令。
3_open // 与打开编辑器相关的命令。
5_close // 与关闭编辑器相关的命令。


2.组内排序
同一个组的顺序取决于菜单名称，如果想自定义排序的话可以再组后面通过@<number>的方式来自定义顺序

3.打包、发布、升级

  • 直接把文件夹发给其他人，找到vscode的插件存放目录并放进去，然后重启vscode，一般不推荐；
  • 打包成vsix插件，然后发送给别人安装，如果你的插件涉及机密不方便发布到应用市场，可以尝试采用这种方式；
  • 注册开发者账号，发布到官网应用市场，这个发布和npm一样是不需要审核的。
安装vsce库
npm i -g vsce
执行打包命令
vsce package
打包完成后，会生成find-test-file-x.x.x.vsix文件。此时可以通过插件市场直接安装插件，验证效果

发布到插件市场：

1.vscode 的插件市场基于微软的 Azure DevOps，插件的身份验证、托管和管理都是在这里。所以发布前，首先得注册 Azure Devops 账号，就像 npm 一样：

2.注册完成后，创建 Personal Access Token：保存好create后，生成的token

3.在插件市场中 新建一个 publisher 用来发布插件：

4.登录 vsce 账户信息，使用之前注册好的 publisher 以及 token

vsce login publisher-name

在package.json文件中添加 publisher，icon，categories 等相关信息

5.登录完成后，就可以发布了

vsce publish

发布成功后，就可以在插件市场搜索到插件了（通常需要等几分钟）。

4.参考资料

avatar
文章
阅读
粉丝