VS Code插件開發教程(3) 插件能力一覽 Capabilities

通用能力(Common Capabilities)

在任何插件中,通用能力都是核心功能,通用能力包括但不限於:git

  • 註冊命令,配置,快捷鍵,上下文菜單
  • 存儲工做區或全局的數據
  • 展現提示信息
  • Quick Pick收集用戶輸入
  • 調用本地文件選擇器以便用戶選擇文件
  • 利用Progress API爲用戶展現長時間運行的操做進度

通用能力主要有如下幾種:github

  • 命令(Command):命令在VS Code的運轉中扮演極爲重要的角色。你會經過Command Palette、綁定快捷鍵或者右鍵菜單來執行命令,而對於一個插件來講,應該作到下面這兩點:web

  • 配置(Configuration):一個插件若是須要用戶配置(這是很常見的),那麼能夠經過 contributes.configuration 實現插件配置項的聲明(contributes.configuration定義了該插件的配置字段以及默認值等信息,用戶能夠實現工做區配置或全局配置,能夠參考 ESLint插件的配置 ),而後經過 workspace.getConfiguration 接口實現獲取用戶實際的配置值編程

  • 快捷鍵(Keybinding):一個插件能夠添加自定義快捷鍵,詳見 contributes.keybindingsjson

  • 上下文菜單(Context Menu):插件能夠添加自定義上線文菜單項,詳見 contributes.menusapi

  • 數據存儲(Data Storage):有4種數據存儲的方式(注:extension context在入口文件的activate函數中可用,是該函數的第一個參數)服務器

    • ExtensionContext.workspaceState:工做空間(workspace)域,以鍵值對方式存儲,由VS Code負責管理。當工做空間再次被打開時,存儲的數據會被恢復。
    • ExtensionContext.globalState:全局域,以鍵值對方式存儲,由VS Code負責管理。當任何一個插件被激活時,,存儲的數據會被恢復。插件能夠同步的讀取到鍵值對數據而且經過setKeysForSync方法異步的賦值
    • ExtensionContext.storagePath:工做空間(workspace)域,能夠爲一個工做空間指定一個存儲路徑(一個本地的目錄),當咱們須要給一個工做空間存儲較大的數據時(例如文件),該功能很是有用
    • ExtensionContext.globalStoragePath:全局域,能夠爲全局空間指定一個存儲路徑(一個本地的目錄),當咱們須要在不一樣的插件之間共用大的數據時(例如文件),該功能很是有用
  • 展現通知(Display Notifications):幾乎全部的插件都會用到通知功能,VS Code提供了3個API用於不一樣級別的通知:markdown

  • 快速選擇(Quick Pick):經過 vscode.QuickPick API ,提供給用戶一些選項去選擇,開發者能夠很容易的獲取到用戶的選擇,能夠經過該 QuickInput Sample 示例學習相關API的用法app

  • 文件選擇(File Picker):經過 vscode.window.showOpenDialog 接口可讓用戶選擇本地的文件異步

  • 輸出通道(Output Channel):輸出面板(Output Panel)是一系列 OutputChannel 的集合,能夠經過 window.createOutputChannel 實現

  • 進度(Progress):能夠經過 vscode.Progress 接口將進度展現給用戶,同時能夠經過 ProgressLocation方法指定顯示的位置 咱們能夠經過這個示例來學習

主題(Theming)

主題影響VS Code的外觀,包括VS Code以及編輯器中代碼的配色,咱們能夠藉助該特性作如下事情:

  • 改變編輯區代碼的配色
  • 改變VS Code界面的配色
  • 增長自定義文件圖標

VS Code中,有三種類型的主題:

  • 顏色主題(Color Theme):UI組件的顏色以及文本字符的顏色,建立主顏色主題的方法能夠參見 Color Theme Guide ,還能夠參考這個示例 Color Theme Sample

    • colors:標記了UI組件的控制色
    • tokenColors:標記了編輯區域的顏色和樣式,詳見 Syntax Highlight Guide 獲取更多信息
    • semanticTokenColors:編輯區域高亮的增強版,詳見 Semantic Highlight Guide
  • 文件圖標主題:將文件類型、名稱對應爲指定的圖標(圖片),File Icon Theme Guide 有對如何建立文件圖標主題的詳細介紹

  • 產品圖標主題:用在UI、Side barActivity barstatus bar等處的圖標,Product Icon Theme Guide 詳細介紹瞭如何建立產品圖標主題

聲明式語言特性(Declarative Language Features)

Declarative Language Features 包含了基本的編程語言文本編輯能力,好比小括號匹配、自動縮進以及語法高亮。這些都是採用聲明式(declaratively)來實現,不用編寫任何代碼。不過聲明語言特性不支持語法提示以及debug之類的高級特性。咱們能夠藉助該特性作如下事情:

  • 給一個插件綁定通用JavaScript語法片斷(snippets)
  • 告知VS Code一種新的編程語言
  • 增添或替換一種編程語言的語法
  • 經過grammar injection拓展已經存在的語法

編程式語言特性(Programmatic Language Features)

Programmatic language features 提供了更加豐富的語言功能,例如Hovers、跳轉到定義、錯誤診斷、智能感知、CodeLens(參考文章)。這些特性均可以經過調用 vscode.languages.*接口實現,不過也能夠經過編寫Language Server來實現。咱們能夠藉助編程式語言特性(Programmatic Language Features)作如下事情:

  • 經過懸浮來展現一個API的用法
  • 經過錯誤診斷來報告源碼中的拼寫錯誤
  • 註冊一個新的HTML式化工具
  • 提供一個強大的、上下文感知的智能提示器
  • 給一個語言提供摺疊、麪包屑功能

工做臺拓展(Workbench Extensions)

Workbench Extensions 能夠用來擴展VS Code的工做臺,還能夠拓展鼠標右鍵,甚至經過VS CodeTreeView API 創建一個自定義explorer(若是想要一個更加自定義的用戶界面,能夠經過 Webview API)。咱們能夠藉助工做臺拓展(Workbench Extensions)作如下事情:

  • 在文件瀏覽菜單增長一個自定義上下文菜單行爲
  • 在側邊欄(Side Bar)增長新的、可交互的樹視圖(TreeView
  • 定義一個新的Activity Bar視圖
  • Status Bar顯示新的信息
  • 經過 Webview API 實現自定義內容渲染

VS Code提供了一系列的API幫助開發者在WorkbenchTitle BarActivity BarSide BarPanelEditor GroupStatus Bar)裏添加本身的組件,例如:

  • Activity BarAzure App Service 插件增長了一個View Container
  • Side Bar:內置的 NPM 插件增長了一個Tree View
  • Editor Group:內置的 Markdown 插件增長了一個 Webview
  • Status Bar:VSCodeVim 插件增長了一個 Status Bar Item(能夠用文字或圖標來展現,而且在點擊的時候執行命令, Status Bar的應用示例能夠參見 statusbar-sample

調試(Debugging)

你能夠利用VS CodeDebugging 功能編寫Debugger Extension,將VS Code的調試界面用於實現某種debugger。咱們能夠藉助該特性作如下事情:

  • 經過 Debug Adapter implementationVS Code的調試UI和一個調試器連接
  • 新增對某一種語言的調試支持
  • 提供調試配置信息的自動補全

另外一方面,VS Code提供了一系列 Debug Extension API ,能夠用來實現調試的自動化,咱們能夠藉助該特性作如下事情:

  • 經過動態的調試配置來啓動調試任務
  • 跟蹤調試任務的生命週期
  • 以編程的方式建立和管理斷點

拓展原則(Extension Guidelines)

爲了幫助開發者編寫合乎VS Code風格的插件,VS Code提供 Extension Guidelines 來幫助開發者學會VS Code插件的最佳開發實踐

限制(Restrictions)

插件沒法訪問到VS Code界面的DOM,無法經過編寫本身的CSS或HTML來改變VS Code的界面,VS Code經過Extension Host 進程來管理插件,杜絕插件對界面的篡改以及可能的性能與穩定性影響。

相關文章

相關文章
相關標籤/搜索