vscode插件开发

雨落风殇
307 阅读2分钟

vscode插件功能概述

通用能力

  • 注册命令、配置、键绑定或上下文菜单项。
  • 存储工作区或全局数据。
  • 显示通知消息。
  • 收集用户输入信息。
  • 打开系统文件选择器让用户选择文件或文件夹。

定制vscode主题

  • 更改源代码颜色
  • 更改vscode UI的颜色
  • 添加自定义图标文件

语言支持

为编程语言提供文本编辑支持，比如代码高亮，文本缩进，括号匹配，悬浮提示，文件跳转，代码补全等。

自定义webview

用于自定义用户界面，相当于把一个网页插入vscode中进行展示

开发流程

  1. 全局安装yo generator-code（vscode提供的扩展生成器）
  2. npm install -g yo generator-code
  3. 运行yo code
  4. 根据提示选择插件开发信息

image.png 5.最后自动生成项目文件

项目结构

image.png

主要文件为两个，package.json配置文件及extension.js插件代码入口文件

package.json

{
        "name": "demo",   // 插件名称
	"displayName": "vscode-demo",   // 插件唯一id，也是插件市场的名称
	"description": "demo",   // 描述
	"version": "0.0.1",      // 版本号
	"engines": {
            "vscode": "^1.68.0"   // 扩展所依赖的 VS Code 的最低版本。
	},
	"categories": [      // 分类，发布到市场后显示的类别
            "Other"
	],
	"activationEvents": [     /// 激活事件
            "onCommand:demo.helloWorld"
	],
	"main": "./extension.js",     //插件文件入口
	"contributes": {
            "commands": [{     // 命令，ctrl+shift+p激活的命令面板输入的命令
                "command": "demo.helloWorld",   //指令id，与激活事件中id对应
                "title": "Hello World"     //指令标题
            }]
	},
	"scripts": {
            "lint": "eslint .",
            "pretest": "npm run lint",
            "test": "node ./test/runTest.js"
        },
	"devDependencies": {
        "@types/vscode": "^1.68.0",
        "@types/glob": "^7.2.0",
        "@types/mocha": "^9.1.1",
        "@types/node": "16.x",
        "eslint": "^8.16.0",
        "glob": "^8.0.3",
        "mocha": "^10.0.0",
        "typescript": "^4.7.2",
        "@vscode/test-electron": "^2.1.3"
    }

}

常用激活事件

  • onLanguage：在打开对应语言文件时

  • onCommand：在执行对应命令时

  • onDebug：启动debug调试会话之前

  • onFileSystem：打开指定的类型或协议的文件或文件夹时

  • onView：侧边栏中指定id的视图打开时

  • onWebviewPanel ： 打开对应的Webview

  • *： 启动 vscode 时，如果不是必须一般不建议这么设置

  • onStartupFinished：此激活事件会在VS Code 启动后的一段时间内发出，和*激活事件类似，但不会减慢 VS Code 的启动速度

extension.js

image.png

  • activate:插件激活时触发
  • deactivate:插件失效时触发
  • vscode.commands.registerCommand:vscode api，用于注册指令
  • context.subscriptions.push:事件入栈

代码片段

image.png

  • language:支持的语言
  • path:代码片段JSON文件

image.png

当输入XF时代码会自动补全

悬停提示

image.png

  • fileName：文件路径
  • word：悬浮获取的文字内容
  • vscode.Hover:vscode Api,用于生成提示语句
avatar
文章
阅读
粉丝