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


Paste_Image.png

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

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:鼠标右键菜单


Paste_Image.png

editor/title:菜单栏按钮


Paste_Image.png
2.4 setting.json配置提示

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

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

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


Paste_Image.png

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.2 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等都很比较齐全,可以很大的提高代码编码速度,同时还可以通过各种提示校验等,提高代码质量。


Paste_Image.png

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,491评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,856评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,745评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,196评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,073评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,112评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,531评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,215评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,485评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,578评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,356评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,215评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,583评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,898评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,497评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,697评论 2 335

推荐阅读更多精彩内容