[手把手系列] 開發一個 VS Code 業務插件

背景

VS Code應該都很熟悉，平時吃飯的工具， 天天都要用。

它是微軟出的一款輕量級代碼編輯器，免費並且功能強大，以功能強大、提示友好、不錯的性能和顏值俘獲了大量開發者的青睞。

對JavaScript和NodeJS的支持很是好，自帶不少功能，如代碼格式化，代碼智能提示補全等。

對於VS Code 插件開發， 你們可能不太熟悉， 可是我以爲你們都應該 學習, 掌握一下這個技能。

由於每一個人都會多多少少有一些本身的特殊定製需求，遇到相似提高開發效率的時候，大部分想到的都是寫一些腳本工具、瀏覽器插件等。

掌握IDE插件開發以後, 就會發現： 有些問題能夠經過更高效的方式來解決，畢竟IDE纔是咱們程序員天天接觸最多的東西。

我最近也開發了一款VS Code 插件， 做爲本身項目的輔助工具, 中間也踩了一些坑， 藉助這個機會分享給你們， 但願對你們有所啓發。

附項目源碼地址： https://github.com/beMySun/wm...

需求場景

我所作的是一個國際化項目， 須要支持多語言， 翻譯的相關資源託管在咱們的翻譯平臺上， 開發的時候， 錄入翻譯字段的 key 和 value, 以下圖：

錄入key:

錄入value:

錄入完成以後， 爲了方便本地開發, 須要下載翻譯好的資源：

下載到本地的就是一些json文件：

而後須要導入到項目中：

這一套流程十分的麻煩， 費時費力， 爲了提高這部分的操做效率， 我開發了一個腳本命令，能夠自動下載資源， 並輸入到對應的目錄中：

十分的方便。

下面，我就介紹下具體的開發流程和開發細節。

工程搭建

VS Code 插件開發， 選用官方推薦的工具： Yo Code

npm install -g yo generator-code

而後執行：

yo code

vscode插件可使用TypeScript來編寫（官方推薦），也可使用JavaScript，本文統一使用後者，不過使用哪一種方式，能實現的功能都是同樣的。

借用一張圖：

根據指引， 一步步生成便可， 這樣， 就獲得了一個乾淨的插件工程了。

其中的 src, utils images目錄是我後面添加的， 能夠忽略。

⚠️ 若是生成的過程當中， 報了版本錯誤， 能夠修改這裏：

而後， 就開始正式的插件開發了。

插件開發

這裏， 咱們須要主要關注兩個文件：

1. package.json
2. extension.js

在package.json中，咱們定義的是須要 執行的命令 和添加 VS Code 菜單：

在 extension.js 中添加咱們自定義的功能：

downloadI18nResources文件中的內容：

const vscode = require('vscode');
const fileloader = require('./download');

module.exports = function (context) {
  context.subscriptions.push(
    vscode.commands.registerCommand('i18n.downloadI18nResources', () => {
      const showInformationMessage = vscode.window.showInformationMessage;
      fileloader.download(showInformationMessage);
    })
  );
};

download 裏面的邏輯就不細說了， 感興趣的能夠看源碼。

有一點須要提一下：

就是腳本執行以後， 文件輸出路徑的問題:

const directoryPath = path.resolve(__dirname, 'src/i18n/locales');

一開始我是這麼寫的， 在插件測試的時候沒有問題， 能夠輸出， 可是輸出的位置不對， 輸出到了插件的工程目錄裏， 而我是須要輸出到業務項目的工程目錄裏，緣由就是在插件裏沒作區分。

在Node Js 中，文件路徑大概有 __dirname, __filename, process.cwd(), ./ 或者 ../，前三個都是絕對路徑，爲了便於比較，./ 和 ../ 咱們經過 path.resolve('./')來轉換爲絕對路徑。

簡單說一下這幾個路徑的意思：

__dirname：    得到當前執行文件所在目錄的完整目錄名
__filename：   得到當前執行文件的帶有完整絕對路徑的文件名
process.cwd()：得到當前執行node命令時候的文件夾目錄名 
./：           文件所在目錄

因此， 要解決上面描述的問題， 就要取得項目當前的路徑：

const getCurrentOpenedFolderPath = () => {
  let path;
  if (vscode.window.activeTextEditor) {
    let workspaceFolder = vscode.workspace.getWorkspaceFolder(vscode.window.activeTextEditor.document.uri);
    path = workspaceFolder.uri.path;
  }
  return path;
};

const projectPath = getCurrentOpenedFolderPath();
const projectName = projectPath.split('/').pop();

// ...

// 把
const directoryPath = path.resolve(__dirname, 'src/i18n/locales');

// 糾正爲：
const directoryPath = path.resolve(currnetPath, 'src/i18n/locales');

就能夠了。

這裏還須要生成多承文件夾， 寫了一段同步腳本：

const path = require('path');
const fs = require('fs');

function mkdirsSync(dirname) {
  if (fs.existsSync(dirname)) {
    return true;
  } else {
    if (mkdirsSync(path.dirname(dirname))) {
      fs.mkdirSync(dirname);
      return true;
    }
  }
}

module.exports = {
  mkdirsSync
};

這樣， 調用download方法， 就能夠把下載的資源輸出到正確的位置上了， 基礎功能開發完成。

調試

工程建立完成以後， 你能夠用自帶的hello world! 來測試。

進入 debug 模式：點擊 Fn + F5, 而後會跳出一個調試面板：

在新出現的面板裏， 點擊shift + cmd + p 輸入你的命令：

爲了方便,你也能夠把命令定義到鼠標右鍵的menu 裏, 這樣就不用手動敲了：

調試過程當中，最好把開發工具， 和調試工具放在不一樣的屏幕裏， 這樣方便點， 更新代碼以後， 點擊那個綠色的圖標按鈕便可， 紅色的圖標是中止調試。

打包

開發完成以後， 能夠先在本地安裝調試：

vsce package

獲得一個vsxl文件， 而後安裝到你的 VS Code 中：

在編輯器中， 輸入 cmd + shift + p, 輸入install:

選擇生成的安裝包：

安裝成功：

後續的流程也是同樣的， 更新代碼以後，都須要從新打包， 安裝。

發佈

最終開發完成以後， 能夠發佈到官方商店， 這樣同事也能下載使用了。

仍是要藉助 vsce, 咱們上面已經安裝過了。

註冊帳號

首先訪問 https://login.live.com/ 登陸你的Microsoft帳號，沒有的先註冊一個：

而後訪問： https://aka.ms/SignupAzureDevOps ，若是你歷來沒有使用過Azure，那麼會看到以下提示：

點擊繼續。

建立令牌

而後就建立成功了：

生成的 token 記得複製一下， 下面要用。

建立發佈帳號

得到我的訪問令牌後，使用vsce如下命令建立新的發佈者：

vsce create-publisher your-publisher-name

須要注意的是， 這裏的 your-publisher-name 須要和你的package.json 中 author 中的字段保持一致, 不然就會報錯， 修改以後就能夠了：

發佈成功！

過幾分鐘，應用商店中也能下載了：

至此，一個基礎的 VS Code 插件就完全完成了。

最後

這個插件用了半天時間，只包含了基礎功能， 後續還會作加強， 待完善的功能點：

• 實現對比功能，把下載到本地的json文件，與系統中真正調用的對比， 找到那些在翻譯平臺中無用的翻譯。
• 實現自動生成翻譯的json, 這樣就不用手動去翻譯平臺添加， 能夠在翻譯平臺上傳文件， 或者自動上傳。

對比功能本地已經開發完成了， 給大家看一下效果：

居然有那麼多沒有用到的翻譯，仍是很是震驚的， 不過結果應該有誤差， 須要逐個覈對。

結尾

本文包含的代碼， 已經在開頭給出了， 若是有幫助到你的話，能夠給個星星～

內容就是這麼多， 但願對你有所啓發。

文中如有筆誤， 還請指正， 謝謝。

參考資料

http://blog.haoji.me/vscode-p...