vscode extension插件开发详解

最近公司要使用vscode作为开发工具,需要对vscode做一些定制功能,比如snippet提示,内容提示,以及其他插件集成等,为此做了一些调查,并做了一定的开发与支持。

官方文档
https://code.visualstudio.com/docs

上面是vscode官方提供的extension开发帮助,按照上面的步骤基本上可以做简单的demo事例

如下主要介绍下自己在开发中做的几个简单功能:

1. Snippet

感觉vscode的snippet功能真的很强大,只要编辑相应的json配置文件,在文档编辑过程中的各种提示应有尽有,在vscode的market上,也可以找到各种后缀格式的文件的配置。

snippet的配置很简单,只需要配置对应的json文件就可以了

 {
/*
   // Place your snippets for C++ here. Each snippet is defined under a snippet name and has a prefix, body and
   // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
   // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
   // same ids are connected.
   // Example:
   "Print to console": {
    "prefix":"log",
    "body":[
      "console.log('$1');",
      "$2"
    ],
    "description":"Log output to console"
  }
*/
}

snippet可以通过两种方式添加:

1.1 通过vscode->首选项-->用户代码段

通过这种方式等于是通过配置自己本地的代码片段,而且只能在本机使用。

1.2 通过开发snippet的extension

对于开发snippet的extension很简单,配置好vscode extension的工程结构,只需要在package.json文件中的contributes-->snippets即可,配置上自己写的json文件或者添加从第三方获取到的json文件即可。

 "contributes": {
  "snippets": [
      {
        "language": "cpp",
        "path": "./snippets/snippets.json"
      }
    ],
 }

通过这种方式,把插件打包发布以后,可以轻松的共享给自己的小伙伴们,对于snippet的扩展很方便。

2. registerCommand

在vscode的插件开发,最基础的就应该算是command了,在功能命令,右键菜单,menu, keybindings等都和command相关,所以在做这些功能之前,首先需要自己注册一个command进去。

// this method is called when your extension is activated
// your extension is activated the very first time the command is executed
export function activate(context: vscode.ExtensionContext) {

  // Use the console to output diagnostic information (console.log) and errors (console.error)
  // This line of code will only be executed once when your extension is activated
  console.log('Congratulations, your extension "demoCmd" is now active!');
  // The command has been defined in the package.json file
  // Now provide the implementation of the command with registerCommand
  // The commandId parameter must match the command field in package.json
  let demoCmd= vscode.commands.registerCommand('extension.demoCmd', () => {
    // The code you place here will be executed every time your command is executed
  });
  context.subscriptions.push(demoCmd);
}

// this method is called when your extension is deactivated
export function deactivate() {

}

这个也是整个插件的入口,上例子中定义了一个extension.demoCmd的cmd,对于上面说的一些定制功能,都需要通过这个cmd在package.json中配置。
注:如下的命令和配置都是在package.json中的contributes属性

2.1 注册命令

注册命令与其名称,注意此处的command必须与上门代码中的cmd名称一致。

     "commands": [{
      "command": "extension.demoCmd",
      "title": "demoCmd"
    }],

注册了这个命令,就可以通过vscode在F1弹出的窗口中输入命令,找到自己刚刚注册的cmd

但是如果添加一个快捷键是不是会更方便呢?

2.2 command添加keybindings

    "keybindings": [{
            "command": "extension.demoCmd",
            "key": "ctrl+shift+a",
            "mac": "ctrl+shift+a",
            "when": "editorTextFocus"
          }],

此处注册一个ctrl+shift+a的快捷键调用我们注册的cmd,添加了以后,可以通过快捷键试试效果,是不是比在F1中输入命令找到对应的cmd方便多了。

2.3 command添加menu

注册了快捷键,是方便了,但是对于很多用户来说,有一个menu按钮或者有一个右键菜单是不是更方便呢?

"menus": {
   "editor/context": [
    {
     "when": "resourceLangId == cpp",
     "command": "extension.demoCmd",
     "group": "navigation"
    }],
    "editor/title": [{
        "when": "resourceLangId == cpp",
        "command": "extension.demoCmd",
        "group": "navigation"
     }]

如上,提供了两种方式添加menu,editor/context:鼠标右键菜单

editor/title:菜单栏按钮

2.4 setting.json配置提示

刚才说了snippet文件内容提示,但是对于插件开发来说,很有可能需要用户配置一些本机的环境或者参数之类的变量,对于这个名称格式的提示也是很有必要的,省的用户配置错误。

"configuration": {
      "type": "object",
      "title": "demoCmd configuration",
      "properties": {
        "demoCmd.encoding": {
          "type": "string",
          "default": "utf-8",
          "description": "default file encoding"
        }
      }
    },

配置了这个,在文件-->首选项-->设置的编辑页面中,就会提示我们刚才配置的属性。此处对于类型,默认值,类型校验都很有作用,可以方便用户配置参数并且减少输入错误率。

3. 一些高阶用法

在2. registerCommand中的activate中我们除了registerCommand还可以注册一些其他的事件.

如下给一个CompletionItemProvider的例子

3.1 CompletionItemProvider

vscode除了最基础的snippet提示,还有另外一种通过CompletionItemProvider实现的提示功能。

// this method is called when your extension is activated
// your extension is activated the very first time the command is executed
export function activate(context: vscode.ExtensionContext) {

   let demoProvider = new demoProvider();
   let cppPv = vscode.languages.registerCompletionItemProvider("cpp", demoProvider);
   context.subscriptions.push(cppPv);
}
// this method is called when your extension is deactivated
export function deactivate() {

}
export class demoProvider implements vscode.CompletionItemProvider{
    public provideCompletionItems(document: vscode.TextDocument, position: vscode.Position, token: vscode.CancellationToken): vscode.CompletionItem[]{

      var completionItems = [];
      var completionItem = new vscode.CompletionItem("aaa");
      completionItem.kind = vscode.CompletionItemKind.Snippet;
      completionItem.detail = "aaa";
      completionItem.filterText = "bbbb";
      completionItem.insertText = new vscode.SnippetString("aaaa$1bbbb$2cccc");
      completionItems.push(completionItem);
      return completionItems;
    }
    public resolveCompletionItem(item: vscode.CompletionItem, token: vscode.CancellationToken): any{
      return item;
    }
    dispose(){

    }
  }

类似的还有CodeActionsProvider,HoverProvider,CodeLensProvider等。

3.2 insertSnippet

在vscode的新版本中,提供了一个insertSnippet方法,用于插入snippet类型格式内容,通过这种方法插入的可以使用snippet的格式,例如$1这种tab跳转等。

    private editSnippet(text : string ) {
      let editor = vscode.window.activeTextEditor;
      let selection : vscode.Selection = editor.selection;
      let insertPosition = new vscode.Position(selection.active.line, 0);
      editor.insertSnippet(new vscode.SnippetString(text), insertPosition);
    }

注意,在vscode低版本中,可能不存在这个功能。

3.3 OutputChannel

OutputChannel主要用于打印输出信息到vscode的输出控制台。

let out:vscode.OutputChannel = vscode.window.createOutputChannel("iAuto3 RunScript");
out.show();
out.appendLine("deom");

类似的还有StatusBarItem,Terminal,TextEditorDecorationType等。

4. 打包发布

这个就参考官方的发布方法,再次提示一点,以为如果是公司内部开发,有些东西是不能对外提交发布的,所以可以考虑只打包,通过本地安装

vsce package

自己打包以后,把打包完成的*.vsix内网发布出去,可以让同事们通过 <b>从VSIX安装</b>

小结:

随着web发展,vscode使用范围在扩大,从extensions market市场上也可以发现,各种功能的插件基本都很齐全,特别是snippet这一块,cpp, ruby,react,angular等都很比较齐全,可以很大的提高代码编码速度,同时还可以通过各种提示校验等,提高代码质量。

同时vscode extensions 开发门槛不高,对于公司内部用于规范代码格式,提高代码质量,降低代码学习门槛都是非常有用的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • VsCode插件整理(小结)

    1.VsCode官方插件地址: https://marketplace.visualstudio.com/vscode http://code.visualstudio.com/docs 官网下载地址:http://code.visualstudio.com/ 2.使用方法,可以在官网中搜索需要的插件或者在VsCode的""扩展""中搜索需要的插件 添加方法使用Ctrl+P, 输入 ext install xxxx ,搜索要安装的插件,点击安装按钮即可 3.常用插件

  • 详解vscode中vue代码颜色插件

    vue提示插件[Vscode] 编者寄语:vscode的确是前端开发中很好的工具,安装颜色插件,从视觉上是美的享受.曾经的我遇到了vscode代码全是灰色,黑色的困惑,后来整理找到方法,整理这篇,以下高亮插件,建议大家都安装了. 在VSCode Marketplace 搜素Vue 出现关于语法高亮的插件有 vue,vue-beautify,vue-color,VueHelper,vertur等等.比较了下载数量可以了解到,vetur 是目前比较好的语法高亮插件,我们来安装一下吧. vscode提

  • vsCode安装使用教程和插件安装方法

    vsCode安装使用教程vsCode是什么vsCode安装vsCode汉化vsCode常用命令说明vsCode左边图标说明vsCode基本使用前端常用插件在vosCode中显示html界面 vsCode是什么 Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮.智能代码补全.自定义热键.括号匹配.代码片段.代码对比 Diff.GIT 等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化.软

  • 推荐VSCode 上特别好用的 Vue 插件之vetur

    Vue自从发布以来就一直受到前端开发人员的热爱,而除了一些本身优秀的特征之外,还有就是丰富的插件和工具的支持和更新.虽然现在的编辑器需要安装相应的plugins才能进行Vue组件化开发,但是越来越多优秀的plugins都提供了强大的支持.比如VSCode下面的Vetur就是这样一款必备的Vue开发工具.下面就开始介绍一下它的一些功能吧 Github仓库:Vetur 官方文档:Vetur文档 语法高亮 Vetur支持.vue文件的语法高亮显示,除了支持template模板以外,还支持大多数主流的前

  • VSCode下好用的Python插件及配置

    MS Python插件. 这是微软官方的Python插件,已经自带很多功能.下面是插件功能描述,其中部分内容我做了翻译. a)        Linting (Prospector, Pylint, pycodestyle, Flake8, pylama, pydocstyle, mypy with config files and plugins)静态代码扫描(可以理解为代码语法和格式错误提示,支持多种linter) b)       Intellisense (autocompletion

  • vscode extension插件开发详解

    最近公司要使用vscode作为开发工具,需要对vscode做一些定制功能,比如snippet提示,内容提示,以及其他插件集成等,为此做了一些调查,并做了一定的开发与支持. 官方文档 https://code.visualstudio.com/docs 上面是vscode官方提供的extension开发帮助,按照上面的步骤基本上可以做简单的demo事例 如下主要介绍下自己在开发中做的几个简单功能: 1. Snippet 感觉vscode的snippet功能真的很强大,只要编辑相应的json配置文件

  • vscode+PyQt5安装详解步骤

    1.默认已经有python环境和vscode 2.pip安装PyQt5 执行命令: pip install PyQt5 pip install PyQt5-tools 3.运行designer.exe 默认安装的话,在\Lib\site-packages\pyqt5_tools目录下找到designer.exe文件并运行 然后创建并保存一个.ui文件. 4.vscode环境配置 在vscode扩展里搜索PYQT integration并添加该扩展. 然后在vscode里打开刚才创建的.ui文件的

  • Python入门开发教程  windows下搭建开发环境vscode的步骤详解

    目录 一.环境介绍 二. 搭建python开发环境 2.1 Python版本介绍 2.2 在windows下安装Python环境 2.3 windows下安装VSCode代码编辑器 一.环境介绍 操作系统: win10 64位 python版本: 3.8 IDE: 采用vscode 用到的相关安装包CSDN打包下载地址: http://xiazai.jb51.net/202107/yuanma/Pytho_jb51.rar 二. 搭建python开发环境 2.1 Python版本介绍 因为Pyt

  • Vue如何使用混合Mixins和插件开发详解

    官网:混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混合对象可以包含任意组件选项.以组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项. 个人:混入就是用来对vue组件中的公共部分,包括数据对象.钩子函数.方法等所有选项,进行提取封装,以达到代码的复用,混合用处挺大的,然我们来看看实际用法. 基础用法 // 这是在main.js根文件中使用,在组中使用也是一样 import Vue from 'vue'; var mixin = { data() {

  • Mybatis自定义拦截器和插件开发详解

    前言 在Spring中我们经常会使用到拦截器,在登录验证.日志记录.性能监控等场景中,通过使用拦截器允许我们在不改动业务代码的情况下,执行拦截器的方法来增强现有的逻辑.在mybatis中,同样也有这样的业务场景,有时候需要我们在不侵入原有业务代码的情况下拦截sql,执行特定的某些逻辑.那么这个过程应该怎么实现呢,同样,在mybatis中也为开发者预留了拦截器接口,通过实现自定义拦截器这一功能,可以实现我们自己的插件,允许用户在不改动mybatis的原有逻辑的条件下,实现自己的逻辑扩展. 本文将按

  • Java Maven高级之插件开发详解

    目录 前言 创建 自定义插件 总结 前言 终于来到了Maven的插件开发,其实Maven的插件并没有想象的那么难,刚开始讲Maven基础的时候就演示了一下JDK是如何打包的,Maven打包只是在JDK打包上封装了一层而已,Maven也支持自定义插件开发 创建 我们先使用quickstart原型创建出一个Maven项目,在pom.xml里面引入一下依赖: <dependency> <groupId>org.apache.maven</groupId> <artifa

  • Vue.js 插件开发详解

    前言 随着 Vue.js 越来越火,Vue.js 的相关插件也在不断的被贡献出来,数不胜数.比如官方推荐的 vue-router.vuex 等,都是非常优秀的插件.但是我们更多的人还只停留在使用的阶段,比较少自己开发.所以接下来会通过一个简单的 vue-toast 插件,来了解掌握插件的开发和使用. 认识插件 想要开发插件,先要认识一个插件是什么样子的. Vue.js 的插件应当有一个公开方法 install .这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象: MyP

  • VSCode插件开发全攻略之package.json详解

    package.json 在详细介绍vscode插件开发细节之前,这里我们先详细介绍一下vscode插件的package.json写法,但是建议先只需要随便看一下,了解个大概,等后面讲到具体细节的时候再回过头来看. 如下是package.json文件的常用配置,当然这里还不是全部: { // 插件的名字,应全部小写,不能有空格 "name": "vscode-plugin-demo", // 插件的友好显示名称,用于显示在应用市场,支持中文 "displa

  • VsCode之使用WebView通信详解

    之前我在这篇文章VsCode插件开发之插件初步通信 通过插件完成通信,这回我还是通过插件,只不过方式主要以在ts文件里面使用webview来进行通信. 另外在此声明,一定要好好看仔细看官方文档,国内关于VsCode相关的开发,少之又少,虽然有一个叫小茗同学写的相对较全面,但是大家可以仔细看,其实他的内容大多也来自官方,同时有部分也加上自己的理解和想法.个人建议,关于VsCode插件相关的,最好是跑一跑VsCode相关官方例子,这样有助于对VsCode插件开发有一个大致的思路和全局认识,换言之有一

  • Intellij IDEA插件开发入门详解

    现今的IDE尽管有如"洪水猛兽"般强大,但要知道再强大的IDE也没法提供给使用者想要的一切功能,所以IDE一般都提供有API接口供开发者自行扩展.下面以Intellij IDEA 12下的插件开发为例,来看一下如何进一步增强IDE以适应开发者的需求. 1.创建Plugin工程 如果Module SDK中没有可选的SDK,那么点击New新添加一个SDK,目录就选择Intellij的安装位置即可. 创建出的Plugin项目结构很简单,只是在META-INF下多了一个plugin.xml配置

随机推荐