持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情
插件能力
- 定制vscode主题
- 编程语言特性（如代码高亮、括号匹配、智能提示、错误分析、跳转定义)
- 使用Webview展示自定义web页面
- 扩展工作台
- 自定义菜单（如右键菜单)
- 拓展调试功能
VS Code UI有两种类型的元素：容器和普通项
- 容器 - 活动栏、侧边栏、编辑框、面板、状态栏
- 普通项 - 放置在容器里面的项。
view视图包括树视图和自定义视图
{
"contributes": {
"viewsContainers": {
"activitybar": [
{
"id": "package-explorer",
"title": "Package Explorer",
"icon": "resources/package-explorer.svg"
}
]
},
"views": {
"package-explorer": [
{
"id": "package-dependencies",
"name": "Dependencies"
},
{
"id": "package-outline",
"name": "Outline"
}
]
}
}
}
效果如下：
Hello World
- 使用脚手架创建项目
npm install -g yo generator-code
yo code
- package.json详解
# 激活插件的事件
"activationEvents": [
"onLanguage:vue",
"onCommand:doc-enhance-helper.showDocEnhanceHelper"
],
"main": "./dist/extension.js",
# 注册的命令，激活插件的命令必须是在这里声明过的
"contributes": {
"snippets": [
{
"language": "vue",
"path": "./snippets/vue.json"
}
],
"commands": [
{
"command": "doc-enhance-helper.showDocEnhanceHelper",
"title": "doc-enhance.showHelper"
}
],
# 插件配置属性
"configuration": {
"type": "object",
"title": "enhance doc Helper Configuration",
"properties": {
"doc-enhance-helper.view.version": {
"type": "string",
"default": "1.0.1",
"description": "Document version",
"enum": [
"1.0.1",
]
}
}
}
},
activationEvents事件详情可看官方文档
- extension.js -- 插件工程的主入口
主函数：function activate() { ... }
每次激活插件时会触发此方法的运行 - 大部分功能都是使用发布-订阅模式，开发者通过提供的api订阅某个事件，并提供该事件触发时对应发布的内容。
例如下面例子：
// 下面实现了代码补齐的功能，首先注册一个事件，当输入对应的字符时，触发此事件，
// 事件监听器此时则会根据部分内容自动补齐其余内容
vscode.languages.registerCompletionItemProvider([{
language: 'pug', scheme: 'file'
}, {
language: 'jade', scheme: 'file'
}, {
language: 'vue', scheme: 'file'
}, {
language: 'html', scheme: 'file'
}], completionItemProvider, '', ' ', ':', '<', '"', "'", '/', '@', '(')
关键API
- vscode.commands.registerCommand: 注册命令面板的命令
- vscode.window.visibleTextEditors 获取目前激活中的编辑器，通过该编辑器可以获取鼠标选中的文本或者行数
