如何實(shí)現(xiàn)編寫插件來(lái)改造VSCode編輯器

這篇文章主要介紹“如何實(shí)現(xiàn)編寫插件來(lái)改造VS Code編輯器”，在日常操作中，相信很多人在如何實(shí)現(xiàn)編寫插件來(lái)改造VS Code編輯器問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”如何實(shí)現(xiàn)編寫插件來(lái)改造VS Code編輯器”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

成都創(chuàng)新互聯(lián)公司專注于黃浦網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供黃浦營(yíng)銷型網(wǎng)站建設(shè)，黃浦網(wǎng)站制作、黃浦網(wǎng)頁(yè)設(shè)計(jì)、黃浦網(wǎng)站官網(wǎng)定制、成都小程序開發(fā)服務(wù)，打造黃浦網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供黃浦網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

作為一個(gè)靠代碼作為“生計(jì)”的開發(fā)者，bug 寫的好不好，編輯器真的很重要！那么 Visual Studio Code 這個(gè)大名你肯定不會(huì)陌生。作為一個(gè)老厲害的編輯器，它的過(guò)人之處簡(jiǎn)單講講來(lái)說(shuō)有這么幾點(diǎn)：

• 首先，它的設(shè)計(jì)者是一個(gè)很有名的工程師：Eric Gamma。20年前，他是《設(shè)計(jì)模式：可復(fù)用面向?qū)ο筌浖幕A(chǔ)》的作者之一，這本書在開發(fā)社區(qū)的地位被視為面向?qū)ο筌浖_發(fā)的指路明燈（瞻望大佬）。

  

• 其次，對(duì)于寫 JavaScript 的人來(lái)說(shuō)，雖然市面上有很多大大小小不同的編輯器，比如 sublime、atom、webstorm 等等，VS Code 與他們區(qū)別在于他比 sublime 開源，比 atom 更快，比 webstorm 更輕。

一、介紹

VS Code 全名 Visual Studio Code 是微軟開源的一款編輯器，GitHub 上標(biāo)星 115k（11 萬(wàn)）。它是基于 TypeScript 編寫，總計(jì)代碼數(shù)量在 30 萬(wàn)以上，大型知名開源項(xiàng)目。

> 項(xiàng)目地址：https://github.com/microsoft/vscode

我們先來(lái)簡(jiǎn)單看一下它的產(chǎn)品定位吧～可以看到，項(xiàng)目作者對(duì)它的定位屬于輕量級(jí)的編輯器，所以要求它輕量、響應(yīng)速度快，適用于多種語(yǔ)言等等。VS Code 的編輯能力來(lái)自于一款同樣來(lái)自微軟叫做 monaco 的開源 Web 編輯器，同時(shí)為了實(shí)現(xiàn)跨平臺(tái)的需求又引入了 Electron：一個(gè)使用 JavaScript，HTML 和 CSS 構(gòu)建跨平臺(tái)的桌面應(yīng)用程序。

正因?yàn)橛辛饲宄亩ㄎ缓头较颍艜?huì)有了更加清晰的邊界?；蛟S你很疑惑，他是怎么支持多種語(yǔ)言的又做到輕量級(jí)的？那我們不得不來(lái)看一下它的多進(jìn)程架構(gòu)。

• VS Code 有一個(gè)主進(jìn)程入口，負(fù)責(zé)一些窗口管理、進(jìn)程間通信、自動(dòng)更新等全局任務(wù)；

• 渲染進(jìn)程，顧名思義負(fù)責(zé)一個(gè) Web 頁(yè)面的渲染；

• 插件宿主進(jìn)程，每個(gè)插件的代碼都運(yùn)行在一個(gè)獨(dú)立且隔離的 Node 環(huán)境的宿主進(jìn)程中，插件無(wú)法訪問 UI；

• Debug 進(jìn)程，用于調(diào)試；

• 語(yǔ)言服務(wù)，是一種重要的特殊拓展，可以為許多編程語(yǔ)言提供編輯體驗(yàn)，還可以實(shí)現(xiàn) VS Code 支持的自動(dòng)補(bǔ)充，錯(cuò)誤檢查（診斷），跳轉(zhuǎn)到定義以及許多其他的語(yǔ)言功能。

最核心的部分就是它的插件系統(tǒng)，為編輯器的拓展帶來(lái)了更加個(gè)性化的開源定制。只要你能找到強(qiáng)大的 VS Code 插件組合在一起，那你的編輯器一定是一個(gè)高級(jí)且高效率的工作好幫手。

先來(lái)看一下，VS Code 大致有哪些可供我們拓展的能力。

有沒有心癢癢地想自己動(dòng)手搞一個(gè) VS Code 插件？下面就帶大家做一個(gè)入門級(jí)的 VS Code 插件。

二、環(huán)境準(zhǔn)備

首先你搞個(gè) Node.js 和 Git。

其次「全局（-g）」安裝 Yeoman（現(xiàn)代 Web 應(yīng)用程序腳手架工具）和 VS Code Extension Generator 這兩個(gè)官方指定的工具腳手架（生成 VS Code 插件項(xiàng)目的工具）。

npm install -g yo generator-code

當(dāng)你看到下面的信息就說(shuō)明安裝成功了：

三、初始化項(xiàng)目結(jié)構(gòu)

依賴環(huán)境搞好了，接下來(lái)就要用到 Yeoman 這個(gè)工具來(lái)幫我們快速創(chuàng)建項(xiàng)目結(jié)構(gòu)啦！可能有很多人對(duì)這個(gè)腳手架不熟悉，簡(jiǎn)單的說(shuō)，Yeoman 是一個(gè)通用的腳手架系統(tǒng)，它允許創(chuàng)建任何類型的應(yīng)用程序。你可以用它快速開始新項(xiàng)目。所以不僅僅是 JavaScript 這個(gè)語(yǔ)言，Java，Python，C＃等都可以用它來(lái)生成項(xiàng)目，只要有對(duì)應(yīng)的生成器就可以。那我們進(jìn)行下一步，在命令行中輸入 yo code。

讓我們來(lái)分析一下這幾個(gè)選項(xiàng)的意思，其實(shí)和字面意思一樣，從上到下：

• 新的插件（Typescript）

• 新的插件（JavaScript）

• 新的主題顏色

• 新的語(yǔ)言支持

• 新的代碼片段

• 新的鍵值綁定

• 新的插件包

• 新的語(yǔ)言包（本土化）

你可以看到這個(gè)工具支持創(chuàng)建多種類型的項(xiàng)目，我們今天先從插件（Extension）入手，所以第一個(gè)和第二個(gè)的區(qū)別就是，你要是會(huì)用 TypeScript 就選第一個(gè)，也是官方推薦的一個(gè)；要是不想寫各種麻煩的類型定義和類型校驗(yàn)，就選第二個(gè) JavaScript。 這一次我們選 JavaScript 來(lái)做一個(gè)簡(jiǎn)單的入門， 隨后你會(huì)需要填寫一系列初始化的信息如下：

注釋如下：

• What type of extension do you want to create?（創(chuàng)建哪一種類型的擴(kuò)展？）

• What's the name of your extension?（擴(kuò)展的名稱？應(yīng)該全部為小寫字母，沒有空格）

• What's the identifier of your extension?（擴(kuò)展的標(biāo)示？）

• What's the description of your extension?（擴(kuò)展的描述是什么？）

• Initialize a git repository?（是否初始化 git 倉(cāng)庫(kù)？）

• Which package manager to use? （因?yàn)槲覀冄b的是 npm，所以選 npm 就行了，如果你有 yarn，你也可以選 yarn）

• 使用哪一種包管理器（來(lái)下載各種 npm 包）

四、搞一個(gè)簡(jiǎn)單的 VS Code 插件

前面的準(zhǔn)備的差不多啦！那我們就要開始開「綠皮小火車」啦。

進(jìn)入剛創(chuàng)建的文件目錄 cd test-extension，文件目錄：

或許你覺得文件目錄嘛，一看就知道了，不就是幾個(gè)配置信息或者項(xiàng)目說(shuō)明嘛，但是這里面的配置信息「非常重要」x3，重要到你可能少一個(gè)配置或者配置的不對(duì)，功能就出不來(lái)。所以我們還是稍微花點(diǎn)筆墨聊聊這里的信息。

首先你可以在 package.json 文件里面，看到自己在前一個(gè)步驟里面設(shè)置的各個(gè)值，配置內(nèi)的各個(gè)主要的含義如下，這里有個(gè)小點(diǎn)注意一下，如果你的 VS Code 比較舊，且更新不了最新的，你就把下面的 engines 設(shè)置的版本低一點(diǎn)，比如我就改成了 ^1.52.0 確保一定能兼容目前的 VS Code 編輯器就可以 :

{
  "name": "test-extension", // 插件的名字
  "displayName": "test-extension", // 在插件市場(chǎng)展示的名字
  "description": "vscode extension sample", // 插件描述
  "version": "0.0.1", // 插件版本
  "engines": { // 最低支持 vscode 的版本
    "vscode": "^1.52.0"
  },
  "categories": [ // 插件的類別，用于在插件市場(chǎng)做區(qū)分
    "Other"
  ],
  "activationEvents": [ // 插件激活的事件列表，可以有多個(gè)觸發(fā)機(jī)制，所以是數(shù)組形式
    "onCommand:test-extension.helloWorld"
  ],
  "main": "./extension.js", // 插件主入口
  "contributes": { // 貢獻(xiàn)點(diǎn)，用于拓展插件功能的配置項(xiàng)，這里不會(huì)細(xì)講，先用 command 舉例
    "commands": [
      {
        "command": "test-extension.helloWorld",
        "title": "Hello World"
      }
    ]
  },
  "scripts": {
    "lint": "eslint .",
    "pretest": "npm run lint",
    "test": "node ./test/runTest.js"
  },
  "devDependencies": {
    "@types/vscode": "^1.55.0",
    "@types/glob": "^7.1.3",
    "@types/mocha": "^8.0.4",
    "@types/node": "^12.11.7",
    "eslint": "^7.19.0",
    "glob": "^7.1.6",
    "mocha": "^8.2.1",
    "typescript": "^4.1.3",
    "vscode-test": "^1.5.0"
  }
}

熟悉了配置之后，我們?cè)賮?lái)看一下插件的入口文件 extsnsion.js ，里面主要有兩個(gè)主要的函數(shù)，一個(gè)是 activate 表示激活插件時(shí)的處理，一般是注冊(cè)命令等一些初始化的操作；另一個(gè)是 deactivate ，表示插件失活的時(shí)候做的處理，其實(shí)聽名字你也應(yīng)該有體感，這就是插件的生命周期里的兩個(gè)鉤子函數(shù)嘛。

// 引了 vscode 這個(gè)模塊，這樣你就可以用它里面的很多很多功能啦
const vscode = require('vscode');

/**
 * @param {vscode.ExtensionContext} context
 */
function activate(context) {

  console.log('Congratulations, your extension "test-extension" is now active!');

  let disposable = vscode.commands.registerCommand('test-extension.helloWorld', function () {
    vscode.window.showInformationMessage('Hello World from test-extension!');
  });

  context.subscriptions.push(disposable);
}

function deactivate() {}

module.exports = {
  activate,
  deactivate
}

我們來(lái)分析一下上面這段代碼，你可以看到里面 registerComman 了一個(gè)命令，是不是有種似曾相識(shí)的感覺？沒錯(cuò)，就是上面在 package.json 里面有提到的那個(gè) command，讓我們摘出來(lái)一起看看：

...,
 // package.json
 "contributes": { // 貢獻(xiàn)點(diǎn)，用于拓展插件功能的配置項(xiàng)，這里不會(huì)細(xì)講，先用 command 舉例
    "commands": [
      {
        "command": "test-extension.helloWorld",
        "title": "Hello World"
      }
    ]
  },
...

...
// extension.js
function activate(context) {
  console.log('Congratulations, your extension "test-extension" is now active!');

  let disposable = vscode.commands.registerCommand('test-extension.helloWorld', function () {
    vscode.window.showInformationMessage('Hello World from test-extension!');
  });

  context.subscriptions.push(disposable);
}
...

這樣看起來(lái)是不是很直觀了？在 package.json 里面設(shè)置的 command 的值，就是 extension.js 里面 registerCommand 的值。那這幾行命令是什么意思呢？讓我們一起來(lái)運(yùn)行看看：

他會(huì)幫你打開一個(gè)新的 VS Code 編輯器，插件只會(huì)加載到這個(gè)編輯器中。現(xiàn)在我們使用調(diào)用快捷鍵（MacOS） command+p ，輸入 >Hello World （不區(qū)分大小寫）：

回車一下，你會(huì)發(fā)現(xiàn)在右下角一個(gè)不起眼的角落里輸出了這么一個(gè)提示：

我相信聰明的你們結(jié)合代碼一定已經(jīng)恍然大悟了對(duì)不對(duì)！不知道你們有沒有這個(gè)疑問，上面那個(gè) console.log 去哪里看？別急，我們回到插件代碼的那個(gè)編輯器中，仔細(xì)看下面這邊，他會(huì)在我們輸入上面的命令之后才出現(xiàn)，因?yàn)樵?package.json 里面我們配置插件的激活時(shí)機(jī)就是 onCommand:test-extension.helloWorld ：

那我們現(xiàn)在抱著「刻意學(xué)習(xí)」的思路，改一下上面的代碼，比如把 test-extension 改成 test ：

...,
// package.json
"activationEvents": [
    "onCommand:test.helloWorld"
],
...,
"contributes": {
  "commands": [
    {
      "command": "test.helloWorld",
      "title": "Hello World"
    }
  ]
},
...

// extension.js
...
function activate(context) {

  console.log('我在這里?。?#39;);

  let disposable = vscode.commands.registerCommand('test.helloWorld', function () {
    vscode.window.showInformationMessage('我改變了 command 的名字!');
  });

  context.subscriptions.push(disposable);
}
...

再按照上面說(shuō)的觸發(fā)方法再來(lái)一遍，發(fā)現(xiàn)依舊是可以的！所以這里的名字只是一個(gè)命名空間，你可以改成你想要的任何名字，來(lái)適用于比較復(fù)雜的插件體系。既然是個(gè)命名空間，那其實(shí)不要這個(gè)前綴也可以。

五、實(shí)現(xiàn)一個(gè)屬于自己的插件

前面介紹了那么多，大家有沒有發(fā)現(xiàn)其實(shí)這個(gè)體系也不難，有大佬在前面鋪路，其實(shí)我們只要按照規(guī)則“填空”就好了，那現(xiàn)在我們就來(lái)實(shí)現(xiàn)一個(gè)小小的功能——加一個(gè)按鈕和他的點(diǎn)擊事件。

修改我們的 package.json 如下，因?yàn)楫?dāng)前我希望插件加載的時(shí)候就已經(jīng)訂閱了按鈕的點(diǎn)擊事件，所以這里我們可以把 activationEvents 改成 *，這樣的話我們的插件在一開始就可以激活并注冊(cè)事件了：

...,
"activationEvents": [
        "*",
],
"contributes": {
  "commands": [
    {
      "command": "test.helloWorld",
      "title": "Hello World"
    },
    // 注冊(cè)一下按鈕點(diǎn)擊的事件，再配一個(gè)小圖標(biāo)
    {
      "command": "test.button",
      "title": "按鈕",
      "icon": {
        "light": "./media/light/preview.svg",
        "dark": "./media/dark/preview.svg"
      }
    }
  ],
  // 在這里加一下下面這個(gè)配置
  "menus": {
    "editor/title": [
      {
        "command": "test.button",
        "group": "navigation"
      }
    ]
  }
},
...

然后回到我們的 extension.js 里面增加一個(gè)簡(jiǎn)單的消息提醒：

function activate(context) {
  console.log('我在這里！！');
  let disposable = vscode.commands.registerCommand('test.helloWorld', function () {
    vscode.window.showInformationMessage('我改變了 command 的名字!');
  });
  // 新增一個(gè)按鈕的點(diǎn)擊命令操作內(nèi)容
  let button = vscode.commands.registerCommand('test.button', function () {
    vscode.window.showInformationMessage('按鈕點(diǎn)擊');
  });
  // 記得這個(gè)新的命令也要放進(jìn)去訂閱一下
  context.subscriptions.push(disposable, button);
}

看一下效果：

是不是很簡(jiǎn)單的就自定義了 VS Code 的樣式？那我們現(xiàn)在就來(lái)分析一下我們上面做的事情。首先，我們修改了 package.json 里的配置，增加了一個(gè) menus ，這個(gè) menus 是什么呢？答案是菜單。菜單項(xiàng)定義包含選擇時(shí)應(yīng)調(diào)用的命令以及該項(xiàng)應(yīng)顯示的條件（when），所以你也可以給這個(gè)菜單項(xiàng)顯示加個(gè)顯示的邏輯，比如我們規(guī)定在打開 javascript 文件時(shí)才顯示這個(gè)按鈕：

{
  "contributes": {
    "menus": {
      "editor/title": [
        {
          "when": "resourceLangId == javascript",
          "command": "test.button",
          "group": "navigation"
        }
      ]
    }
  }
}

而 group 的含義呢，是用來(lái)定義菜單項(xiàng)的排序和分組的。來(lái)自官網(wǎng)的一個(gè)圖，表示不同的 group 之間存在的順序關(guān)系，當(dāng)然這個(gè)菜單不是上面我們寫的那個(gè)，而是 editor/context ，所以不同的菜單之間的 group 其實(shí)是有細(xì)微差別的，但是大體都差不多，而 navigation 的顯示優(yōu)先級(jí)是最高的：

我們也可以加一個(gè)這個(gè)看看：

"menus": {
  "editor/title": [
    {
      "command": "test.button",
      "group": "navigation",
      "when": "resourceLangId == javascript"
    }
  ],
    "editor/context": [
      {
        "command": "test.button",
        "group": "navigation",
        "when": "resourceLangId == javascript"
      }
    ]
}

效果是一樣的：

如果你好奇還有哪些菜單，我這里簡(jiǎn)單整理「翻譯」了一下官網(wǎng)的內(nèi)容（僅常見菜單非全部）：

配置菜單項(xiàng)的名稱	菜單位置
commandPalette	全局命令面板
explorer/context	資源管理器上下文菜單
editor/context	編輯器右鍵上下文菜單
editor/title	編輯器標(biāo)題欄，不配置圖片就顯示文字
editor/title/context	編輯器標(biāo)題右鍵上下文菜單
debug/callstack/context	調(diào)試棧視圖的上下文菜單
debug/toolbar	調(diào)試工具欄
scm/title	SCM 標(biāo)題菜單
view/title	看標(biāo)題菜單
touchBar	macOS 觸摸欄
timeline/title	時(shí)間軸視圖標(biāo)題菜單欄
extension/context	擴(kuò)展程序視圖上下文菜單

到此，關(guān)于“如何實(shí)現(xiàn)編寫插件來(lái)改造VS Code編輯器”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

分享標(biāo)題：如何實(shí)現(xiàn)編寫插件來(lái)改造VSCode編輯器
文章源于：http://muchs.cn/article6/pipdog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、品牌網(wǎng)站制作、定制開發(fā)、微信公眾號(hào)、靜態(tài)網(wǎng)站、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)