vscode學習之命令行擴展

vscode 學習之命令行擴展

命令行是 vscode 最經常使用的功能，命令行擴展是 vscode 自身擴展性不可或缺的一部分

組件的建立及運行

建立

經過 yeoman 和 vscode extension generator 初始化一個擴展

npm install -g yo generator-code
yo code

TypeScript 是 vscode 實現的特色之一，推薦選擇 Typescript 擴展模版體驗 ts 編碼的別樣感覺

運行

• vscode 編輯器中打開建立好的項目
• F5 或者點擊 debug 面板開始調試進入調試模式。按照官方文檔描述，此時會自動打開一個新的 vscode 面板，新開的 vscode 會識別當前調試的插件可是本身在此過程當中遇到一個問題：launch.json中配置的前置的npm: watch任務執行阻塞，未能打開新的面板，需手動重啓一次watch任務（執行⇧⌘B）,從新進入調試模式（執行⇧⌘F5）
• F1 或者 ⇧⌘P 打開命令輸入，執行 Hello World, 界面右下角會彈出 Hello World 信息框。第一個命令行擴展完成
• ln -s currentFolder ~/.vscode/extensions/extensionName ，感覺插件安裝後的效果

核心文件結構

package.json

描述插件入口信息，包括命令擴展文件入口定義，命令顯示註冊，命令配置

src/extension.ts

插件的執行邏輯

out/*

ts編譯後的目標目錄

.vscode

vscode 常規配置，定義調試、任務，編輯器設置等

.vscodeignore

提交至 vscode marketplace 忽略的文件

命令行步驟

• vscode 提供了 deactivate 和 activate 兩個切面方法

• 在 activate 經過名稱註冊命令，定義命令執行的邏輯。以下，定義了展現編輯器選中內容信息的邏輯：

  let editor = vscode.window.activeTextEditor;
      if (!editor) {
          return;
      }
      let section = editor.selection;
      let text = editor.document.getText(section);
  
      // Display a message box to the user
      vscode.window.showInformationMessage(text);

• 編輯器中經過 package.json 中 contributes.commands 列表中定義的命令信息（包含名稱屬性command和標題屬性title的對象）執行命令
• 若是註冊命令在 package.json activationEvents 存在，則執行對應的邏輯

我的理解有差錯，歡迎指正 😊