# vscode 插件开发

# 参考资料

vscode插件开发入门教程 (opens new window)

当前项目源码 (opens new window)

# 二次开发、安装和发布

无论是本地开发还是发布到应用市场,都需要用到 vsce 工具

npm install -g vsce
1

打包命令

vsce package
1

安装 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"
],
1
2
3

# 语言激活(onLanguage)

根据当前打开的语言类型文件激活,比如python javascript等 一旦打开这些文件就会激活activate 同时语言文件也是可以自定义的,必须打开 .vue 文件

package.json 文件

"activationEvents": [
    "onLanguage:python",
    "onLanguage:json",
]
1
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的文件,自动激活
]
1
2
3

# 无限制激活(启动激活)

无限制,一旦启动vscode,自动激活插件

"activationEvents": [
    "*"
]
1
2
3

# onFileSystem

只要读取特定方案中的文件或文件夹,就会激活感兴趣的扩展

"activationEvents": [
  "onFileSystem:sftp"
]
1
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 文件
    }
  ]
},
1
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"
  }
}
1
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”已被释放!')
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
上次更新: 12/2/2020, 1:49:52 PM