vscode 插件开发 | 前端 vscode 插件

# vscode 插件开发

# 参考资料

# 二次开发、安装和发布

无论是本地开发还是发布到应用市场，都需要用到 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"
],

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

← 更新日志