欧美大屁股bbbbxxxx,狼人大香伊蕉国产www亚洲,男ji大巴进入女人的视频小说,男人把ji大巴放进女人免费视频,免费情侣作爱视频

歡迎來到入門教程網(wǎng)!

ASP.NET

當(dāng)前位置:主頁(yè) > 網(wǎng)絡(luò)編程 > ASP.NET >

vscode extension插件開發(fā)詳解

來源:本站原創(chuàng)|時(shí)間:2020-01-11|欄目:ASP.NET|點(diǎn)擊: 次

最近公司要使用vscode作為開發(fā)工具,需要對(duì)vscode做一些定制功能,比如snippet提示,內(nèi)容提示,以及其他插件集成等,為此做了一些調(diào)查,并做了一定的開發(fā)與支持。

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

上面是vscode官方提供的extension開發(fā)幫助,按照上面的步驟基本上可以做簡(jiǎn)單的demo事例

如下主要介紹下自己在開發(fā)中做的幾個(gè)簡(jiǎn)單功能:

1. Snippet

感覺vscode的snippet功能真的很強(qiáng)大,只要編輯相應(yīng)的json配置文件,在文檔編輯過程中的各種提示應(yīng)有盡有,在vscode的market上,也可以找到各種后綴格式的文件的配置。

snippet的配置很簡(jiǎn)單,只需要配置對(duì)應(yīng)的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->首選項(xiàng)-->用戶代碼段

通過這種方式等于是通過配置自己本地的代碼片段,而且只能在本機(jī)使用。

1.2 通過開發(fā)snippet的extension

對(duì)于開發(fā)snippet的extension很簡(jiǎn)單,配置好vscode extension的工程結(jié)構(gòu),只需要在package.json文件中的contributes-->snippets即可,配置上自己寫的json文件或者添加從第三方獲取到的json文件即可。

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

通過這種方式,把插件打包發(fā)布以后,可以輕松的共享給自己的小伙伴們,對(duì)于snippet的擴(kuò)展很方便。

2. registerCommand

在vscode的插件開發(fā),最基礎(chǔ)的就應(yīng)該算是command了,在功能命令,右鍵菜單,menu, keybindings等都和command相關(guān),所以在做這些功能之前,首先需要自己注冊(cè)一個(gè)command進(jìn)去。

// 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() {
  
}

這個(gè)也是整個(gè)插件的入口,上例子中定義了一個(gè)extension.demoCmd的cmd,對(duì)于上面說的一些定制功能,都需要通過這個(gè)cmd在package.json中配置。
注:如下的命令和配置都是在package.json中的contributes屬性

2.1 注冊(cè)命令

注冊(cè)命令與其名稱,注意此處的command必須與上門代碼中的cmd名稱一致。

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

注冊(cè)了這個(gè)命令,就可以通過vscode在F1彈出的窗口中輸入命令,找到自己剛剛注冊(cè)的cmd

但是如果添加一個(gè)快捷鍵是不是會(huì)更方便呢?

2.2 command添加keybindings

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

此處注冊(cè)一個(gè)ctrl+shift+a的快捷鍵調(diào)用我們注冊(cè)的cmd,添加了以后,可以通過快捷鍵試試效果,是不是比在F1中輸入命令找到對(duì)應(yīng)的cmd方便多了。

2.3 command添加menu

注冊(cè)了快捷鍵,是方便了,但是對(duì)于很多用戶來說,有一個(gè)menu按鈕或者有一個(gè)右鍵菜單是不是更方便呢?

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

如上,提供了兩種方式添加menu,editor/context:鼠標(biāo)右鍵菜單

editor/title:菜單欄按鈕

2.4 setting.json配置提示

剛才說了snippet文件內(nèi)容提示,但是對(duì)于插件開發(fā)來說,很有可能需要用戶配置一些本機(jī)的環(huán)境或者參數(shù)之類的變量,對(duì)于這個(gè)名稱格式的提示也是很有必要的,省的用戶配置錯(cuò)誤。

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

配置了這個(gè),在文件-->首選項(xiàng)-->設(shè)置的編輯頁(yè)面中,就會(huì)提示我們剛才配置的屬性。此處對(duì)于類型,默認(rèn)值,類型校驗(yàn)都很有作用,可以方便用戶配置參數(shù)并且減少輸入錯(cuò)誤率。

 

3. 一些高階用法

在2. registerCommand中的activate中我們除了registerCommand還可以注冊(cè)一些其他的事件.

如下給一個(gè)CompletionItemProvider的例子

3.1 CompletionItemProvider

vscode除了最基礎(chǔ)的snippet提示,還有另外一種通過CompletionItemProvider實(shí)現(xiàn)的提示功能。

// 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的新版本中,提供了一個(gè)insertSnippet方法,用于插入snippet類型格式內(nèi)容,通過這種方法插入的可以使用snippet的格式,例如$1這種tab跳轉(zhuǎn)等。

    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低版本中,可能不存在這個(gè)功能。

3.3 OutputChannel

OutputChannel主要用于打印輸出信息到vscode的輸出控制臺(tái)。

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

類似的還有StatusBarItem,Terminal,TextEditorDecorationType等。

4. 打包發(fā)布

這個(gè)就參考官方的發(fā)布方法,再次提示一點(diǎn),以為如果是公司內(nèi)部開發(fā),有些東西是不能對(duì)外提交發(fā)布的,所以可以考慮只打包,通過本地安裝

vsce package

自己打包以后,把打包完成的*.vsix內(nèi)網(wǎng)發(fā)布出去,可以讓同事們通過 從VSIX安裝

小結(jié):

隨著web發(fā)展,vscode使用范圍在擴(kuò)大,從extensions market市場(chǎng)上也可以發(fā)現(xiàn),各種功能的插件基本都很齊全,特別是snippet這一塊,cpp, ruby,react,angular等都很比較齊全,可以很大的提高代碼編碼速度,同時(shí)還可以通過各種提示校驗(yàn)等,提高代碼質(zhì)量。

同時(shí)vscode extensions 開發(fā)門檻不高,對(duì)于公司內(nèi)部用于規(guī)范代碼格式,提高代碼質(zhì)量,降低代碼學(xué)習(xí)門檻都是非常有用的。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持我們。

上一篇:VsCode插件開發(fā)之插件初步通信的方法步驟

欄    目:ASP.NET

下一篇:沒有了

本文標(biāo)題:vscode extension插件開發(fā)詳解

本文地址:http://mengdiqiu.com.cn/a1/ASP_NET/10936.html

網(wǎng)頁(yè)制作CMS教程網(wǎng)絡(luò)編程軟件編程腳本語(yǔ)言數(shù)據(jù)庫(kù)服務(wù)器

如果侵犯了您的權(quán)利,請(qǐng)與我們聯(lián)系,我們將在24小時(shí)內(nèi)進(jìn)行處理、任何非本站因素導(dǎo)致的法律后果,本站均不負(fù)任何責(zé)任。

聯(lián)系QQ:835971066 | 郵箱:835971066#qq.com(#換成@)

Copyright © 2002-2020 腳本教程網(wǎng) 版權(quán)所有