VScode插件

开发环境准备

VSCode
Nodejs
官方推荐使用的脚手架工具 Yeoman 和 Generator-code
插件打包和发布工具 vsce

脚手架使用

1、安装

npm install -g yo generator-code

2、使用脚手架
在这里插入图片描述
3、执行
Inside the editor, open src/extension.ts and pressF5. This will compile and run the extension in a new Extension Development Host window.
Run the Hello World command from the Command Palette (Ctrl+Shift+P) in the new window:

发布

发布插件的方式基本有三种：
1、直接共享源文件；
2、发布到插件市场；
3、使用vsce，打包成vsix插件安装。

npm install -g @vscode/vsce

vsce publish

在这里插入图片描述

配置

activationEvents

onLanguage

当打开为特定语言的文件时, 插件被激活。

语言标识

"activationEvents": [   
     "onLanguage:typescript",
     "onLanguage:typescriptreact"
  ],

onCommand

在调用命令时被激活

contributes

命令

"commands": [
      {
        "command": "helloworld.helloWorld",
        "title": "Hello World"
      }
    ]

快捷键

"keybindings": [
      {
        "command": "helloworld.helloWorld",
        "key": "ctrl+f1",
        "mac": "cmd+f1",
        "when": "editorTextFocus"
      }
    ]

菜单

 "menus": {
      "editor/title": [
        {
          "command": "helloworld.helloWorld",
          "alt": "helloworld.helloWorld.menu",
          "group": "navigation"
        }
      ],
      "view/title": [
        {
          "command": "helloworld.helloWorld",
          "when": "view == terminal",
          "group": "navigation"
        }
      ],
      "scm/title": [
        {
          "submenu": "git.commit",
          "group": "2_main@1",
          "when": "scmProvider == git"
        }
      ],
      "editor/context":[
        {
          "command": "helloworld.helloWorld",
          "group": "navigation"
        }
      ]
    }

设置

 "configuration":[
      {
        "title": "helloWorld",
        "properties": {
          "helloWorld.visible":{
            "type":"boolean",
            "default":false,
            "description": "helloWorld."
          }
        }
      }
    ]