站長資訊網本篇文章帶大家從0開發一個vscode變量翻譯插件，本文會從四個方面來完整的展示整個插件從功能設計到發布的完整歷程，希望對大家有所幫助！
需求的起因是英語渣在開發的過程中經常遇到一個變量知道中文叫啥，但是英文單詞可能就忘了，或者不知道，這個時候，我之前做法是打開瀏覽器，打開谷歌翻譯，輸入中文，復制英文，然后切回vscode，粘貼結果。
實在是太麻煩了，年輕的時候還好，記性好，英文單詞大部分都能記住，但隨著年紀越來越大，頭發越來越少，記性也是越來越差，上面的步驟重復的次數也越來越多，所以痛定思痛，就開發了這款插件。
因為自己也是這幾天從零開始學習的插件開發，所以本文完全的記錄了一個小白開發的插件開發之路，內容主要是實戰類的介紹，主要從四個方面介紹來完整的展示整個插件從功能設計到發布的完整歷程。
-
功能設計
-
環境搭建
-
插件功能開發
-
插件打包發布
【推薦學習：《vscode入門教程》】
功能設計
功能主要是兩個功能，中譯英，其他語言翻譯成中文
-
將中文變量替換為翻譯后的英文變量，多個單詞需要自動駝峰，解決的場景就是日常開發經常碰到的“英語卡殼”
-
劃詞翻譯，自動將各種語言翻譯成中文，這解決的場景是有時候看國外項目源代碼的注釋碰到不會的單詞不知道啥意思影響效率
環境搭建
上手的第一步，環境搭建
-
安裝腳手架, yo 與 generator-code,這兩個工具可以幫助我們快速構建項目，詳情可見（https://github.com/Microsoft/vscode-generator-code）
//安裝 yarn global add yo generator-code
-
安裝vsce,vsce可用來將開發的代碼打包成.vsix后綴的文件，方便上傳至微軟插件商店或者本地安裝
yarn global add vsce
-
生成并初始化項目,初始化信息根據自己情況填寫
//初始化生成項目 yo code
到這一步后，選擇直接打開，Open with code
打開后會自動建立一個工作區，并生成這些文件，可根據自己需要對文件進行刪減，完成這步后，我們可以直接進行開發與調試了
如何進行調試？
去運行與調試面板點擊Run Extention,或者快捷鍵F5,mac可以直接點擊觸控欄的調試按鈕
打開后會彈出一個新的vscode窗口，這個新的窗口就是你的測試環境(擴展開發宿主)，你做的插件功能就是在這個新的窗口測試，打印的消息在前一個窗口的調試控制臺中,比如自帶的例子，在我們新窗口 cmd/ctrl+shift+p后輸入Hello world后會在前一個窗口的控制臺打印一些信息
到這里，開發準備環境就準備好了，下一步就是開始正式的插件功能開發
插件功能開發
插件開發中，有兩個重要的文件，一個是 package.json,一個是 extention.js
重要文件說明
package.json
-
activationEvents用來注冊激活事件，用來表明什么情況下會激活extention.js中的active函數。常見的有onLanguage,onCommand…
