环境准备:

安装两个包

npm install -g yo generator-code

  • yo:创建项目
  • generator-code:VS Code扩展生成器

    初始化项目

    yo code

image.png

重要的文件

package.json

  1. {
  2. "name": "ff",//文件名
  3. "displayName": "ff",//插件名
  4. "description": "",//插件描述
  5. "version": "0.0.1",//插件版本号
  6. "engines": {
  7. "vscode": "^1.60.0"//***最低支持的vscode版本***
  8. },
  9. "categories": [
  10. "Other"//扩展类别
  11. ],
  12. "activationEvents": [ //激活事件组,在哪些事件情况下被激活 举例如下
  13. "onCommand:ff.helloWorld" //onCommand 当调用命令时激活事件
  14. "onLanguage:html",//onLanguage 特定语言环境打开时激活
  15. ],
  16. "main": "./extension.js",//插件的入口文件
  17. "contributes": {//贡献点
  18. //配置命令
  19. "commands": [{
  20. "command": "ff.helloWorld",
  21. "title": "Hello World"
  22. }],
  23. "menus": {
  24. // 编辑器上下文 右键菜单
  25. "editor/context": [
  26. {
  27. "command": "createdirindex",
  28. //命令所在的分组就右键该命令所在的分区,参考:https://code.visualstudio.com/api/references/contribution-points#Sorting-of-groups
  29. "group": "1_modification",
  30. // 对于哪些文件或哪些条件下显示扩展命令
  31. "when": "explorerResourceIsFolder"
  32. }
  33. ]
  34. }
  35. }
  36. "scripts": {
  37. "lint": "eslint .",
  38. "pretest": "yarn run lint",
  39. "test": "node ./test/runTest.js"
  40. },
  41. //开发依赖项
  42. "devDependencies": {
  43. "@types/vscode": "^1.66.0",
  44. "@types/glob": "^7.2.0",
  45. "@types/mocha": "^9.1.0",
  46. "@types/node": "14.x",
  47. "eslint": "^8.11.0",
  48. "glob": "^7.2.0",
  49. "mocha": "^9.2.2",
  50. "typescript": "^4.5.5",
  51. "@vscode/test-electron": "^2.1.3"
  52. }
  53. }

extension.js

  1. const vscode = require('vscode');
  2. function activate(context) {
  3. //此时插件已经被激活
  4. console.log('插件已经被激活');
  5. //定义一个命令
  6. //ff.helloWorld 可以当作id
  7. let disposable = vscode.commands.registerCommand('ff.helloWorld', function () {
  8. //触发一个弹窗
  9. vscode.window.showInformationMessage('Hello World from ff!');
  10. });
  11. //把命令放入上下文中,使其生效
  12. context.subscriptions.push(disposable);
  13. }
  14. //插件被销毁时调用的方法
  15. function deactivate() {}
  16. //方法暴露出去
  17. module.exports = {
  18. activate,
  19. deactivate
  20. }

调试

ctrl+f5进入调试模式,出现一个新窗口(此窗口里包含开发的插件)
image.png
看看是否生效:新窗口里(ctrl+shift+p )输入配置的命令名,回车
image.png
新窗口右下角出现扩展弹窗,成功🎈
image.png
输入命令激活插件,触发弹窗👇
image.png

API

https://code.visualstudio.com/api
目前接触到的api不多,vscode的api灵活性比较低,所以开发功能时以简单实用为主
举个例子🌰
createQuickPick:快速过滤选择输入框,可以对输入的内容进行实时过滤并选择,如下👇
image.png

发布一个插件

这里我们本地打包插件

  1. npm i vsce -g
  1. vsce package

参考文献