# vscode 插件开发
# 参考资料
vscode插件开发入门教程 (opens new window)
# 二次开发、安装和发布
无论是本地开发还是发布到应用市场,都需要用到 vsce
工具
npm install -g vsce
打包命令
vsce package
安装
Ctrl+Shift+P
(mac:command + shift + p
) -> > Install from VSIX
选中我们打包的 .vsix
文件即可
# pacgage.json
vscode 插件许多配置都是在项目
package.json
中进行配置的,package.json
是项目的入口文件和配置文件
# 图标和发布者
package.json 文件中 "icon": "img/ico.png"
必须设置发布者,不设置是不允许发布的
# 插件激活方式
# 命令激活(onCommand)
按下 F5 弹出新的开发窗口,再按下 Ctrl+Shift+P
输入 hello
选择激活
package.json
文件
"activationEvents": [
"onCommand:extension.sayHello"
],
2
3
# 语言激活(onLanguage)
根据当前打开的语言类型文件激活,比如python javascript等 一旦打开这些文件就会激活activate
同时语言文件也是可以自定义的,必须打开 .vue
文件
package.json
文件
"activationEvents": [
"onLanguage:python",
"onLanguage:json",
]
2
3
4
# 调试激活(onDebug)
onDebugInitialConfigurations:
- 在调用 provideDebugConfigurations 方法之前触发 DebugConfigurationProvider onDebugResolve:type
- 在调用指定类型的 resolveDebugConfiguration 方法之前触发 DebugConfigurationProvider
如果调试扩展的激活是轻量级的,请使用 onDebug。如果它是重量级的,则使用 onDebugInitialConfigurations 和/或onDebugResolve 取决于是否 DebugConfigurationProvider 实施相应的方法 provideDebugConfigurations 和/或 resolveDebugConfiguration。有关这些方法的更多详细信息,请参阅使用 DebugConfigurationProvider
# 根据文件夹激活(workspaceContains)
每当打开文件夹并且文件夹包含至少一个与 模式匹配的文件时,就会激活此激活事件并激活当前扩展
"activationEvents": [
"workspaceContains:package.json" // 包含package.json的文件,自动激活
]
2
3
# 无限制激活(启动激活)
无限制,一旦启动vscode,自动激活插件
"activationEvents": [
"*"
]
2
3
# onFileSystem
只要读取特定方案中的文件或文件夹,就会激活感兴趣的扩展
"activationEvents": [
"onFileSystem:sftp"
]
2
3
# onView
发出此激活事件,只要展开指定 ID 的视图,就会激活当前扩展
# onUri
只要打开该扩展的系统范围的 Uri,就会激活感兴趣的扩展
# contributes
- configuration:设置
- commands:命令
- menus:菜单
- keybindings:快捷键绑定
- languages:新语言支持
- debuggers:调试
- breakpoints:断点
- grammars
- themes:主题
- snippets:代码片段
- jsonValidation:自定义JSON校验
- views:左侧侧边栏视图
- viewsContainers:自定义activitybar
- problemMatchers
- problemPatterns
- taskDefinitions
- colors
# 代码块开发
# package.json中代码块配置
我们使用的是 .vue
文件,所以要在插件中自定义一种语言
"contributes": {
"languages": [ // 自定义语言
{
"id": "vue",
"aliases": [
"Vue",
"vue"
],
"extensions": [
".vue"
]
}
],
"snippets": [
{
"language": "javascript",
"path": "./snippets/javascript.json" // 插件中代码块对应的 json 文件
},
{
"language": "vue", // 使用我们自定义的语言
"path": "./snippets/javascript.json" // 插件中代码块对应的 json 文件
},
{
"language": "vue-html", // 使用我们自定义的语言
"path": "./snippets/javascript.json" // 插件中代码块对应的 json 文件
},
{
"language": "html",
"path": "./snippets/javascript.json" // 插件中代码块对应的 json 文件
}
]
},
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
# 自定义代码块格式
一个json文件,key 是自定义命令的 key, value 是自定义命令的格式
{
"evue": {
"prefix": "evue", // 自定义命令快捷键
// body:自定义命令的内容,可以是一个字符串,也可以是一个数组
"body": [
"<template>",
" <div>",
" $1", // 光标会指向这个地方
" </div>",
"</template>\n",
"<script>",
"export default {",
" name: '',",
" mixins: [],",
" props: {},",
" components: {},",
" data () {",
" return {",
" $2", // 光标会指向这个地方
" }",
" },",
" watch: {},",
" computed: {},",
" created () {},",
" mounted () {},",
" methods: {",
" $3", // 光标会指向这个地方
" }",
"}",
"</script>\n",
"<style scoped lang=\"${4:scss}\">\n", // ${4:scss} 光标会指向这个地方,同时默认输入的是scss
"</style>\n"
],
"description": "vue template 模板",
"type": "function",
"language": "html"
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
# 入口文件:src/extension.js
这个文件是我们插件程序的入口文件
pageage.json 和 extension.js 这两个文件都是必须的
const vscode = require('vscode')
/**
* 插件被激活时触发,所有代码总入口
* @param {*} context 插件上下文
*/
exports.activate = function(context) {
console.log('恭喜,您的扩展“vscode-plugin”已被激活!');
};
/**
* 插件被释放时触发
*/
exports.deactivate = function() {
console.log('您的扩展“vscode-plugin”已被释放!')
};
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
← 更新日志