本篇文章帶大家從0開發(fā)一個(gè)vscode變量翻譯插件，本文會從四個(gè)方面來完整的展示整個(gè)插件從功能設(shè)計(jì)到發(fā)布的完整歷程，希望對大家有所幫助！

需求的起因是英語渣在開發(fā)的過程中經(jīng)常遇到一個(gè)變量知道中文叫啥，但是英文單詞可能就忘了，或者不知道，這個(gè)時(shí)候，我之前做法是打開瀏覽器，打開谷歌翻譯，輸入中文，復(fù)制英文，然后切回vscode，粘貼結(jié)果。

實(shí)在是太麻煩了，年輕的時(shí)候還好，記性好，英文單詞大部分都能記住，但隨著年紀(jì)越來越大，頭發(fā)越來越少，記性也是越來越差，上面的步驟重復(fù)的次數(shù)也越來越多，所以痛定思痛，就開發(fā)了這款插件。

因?yàn)樽约阂彩沁@幾天從零開始學(xué)習(xí)的插件開發(fā)，所以本文完全的記錄了一個(gè)小白開發(fā)的插件開發(fā)之路，內(nèi)容主要是實(shí)戰(zhàn)類的介紹，主要從四個(gè)方面介紹來完整的展示整個(gè)插件從功能設(shè)計(jì)到發(fā)布的完整歷程。

• 功能設(shè)計(jì)

• 環(huán)境搭建

• 插件功能開發(fā)

• 插件打包發(fā)布

【推薦學(xué)習(xí)：《vscode入門教程》】

功能設(shè)計(jì)

功能主要是兩個(gè)功能，中譯英，其他語言翻譯成中文

• 將中文變量替換為翻譯后的英文變量，多個(gè)單詞需要自動(dòng)駝峰，解決的場景就是日常開發(fā)經(jīng)常碰到的“英語卡殼”

• 劃詞翻譯，自動(dòng)將各種語言翻譯成中文，這解決的場景是有時(shí)候看國外項(xiàng)目源代碼的注釋碰到不會的單詞不知道啥意思影響效率

環(huán)境搭建

上手的第一步，環(huán)境搭建

• 安裝腳手架, yo 與 generator-code,這兩個(gè)工具可以幫助我們快速構(gòu)建項(xiàng)目，詳情可見（https://github.com/Microsoft/vscode-generator-code）

  //安裝 yarn global add yo generator-code

• 安裝vsce,vsce可用來將開發(fā)的代碼打包成.vsix后綴的文件，方便上傳至微軟插件商店或者本地安裝

  yarn global add vsce

• 生成并初始化項(xiàng)目,初始化信息根據(jù)自己情況填寫

  //初始化生成項(xiàng)目 yo code

  到這一步后，選擇直接打開，Open with code

打開后會自動(dòng)建立一個(gè)工作區(qū)，并生成這些文件，可根據(jù)自己需要對文件進(jìn)行刪減，完成這步后，我們可以直接進(jìn)行開發(fā)與調(diào)試了

如何進(jìn)行調(diào)試？

去運(yùn)行與調(diào)試面板點(diǎn)擊Run Extention,或者快捷鍵F5,mac可以直接點(diǎn)擊觸控欄的調(diào)試按鈕

打開后會彈出一個(gè)新的vscode窗口，這個(gè)新的窗口就是你的測試環(huán)境(擴(kuò)展開發(fā)宿主)，你做的插件功能就是在這個(gè)新的窗口測試，打印的消息在前一個(gè)窗口的調(diào)試控制臺中,比如自帶的例子，在我們新窗口 cmd/ctrl+shift+p后輸入Hello world后會在前一個(gè)窗口的控制臺打印一些信息

到這里，開發(fā)準(zhǔn)備環(huán)境就準(zhǔn)備好了，下一步就是開始正式的插件功能開發(fā)

插件功能開發(fā)

插件開發(fā)中，有兩個(gè)重要的文件，一個(gè)是 package.json,一個(gè)是 extention.js

重要文件說明

package.json

• activationEvents用來注冊激活事件，用來表明什么情況下會激活extention.js中的active函數(shù)。常見的有onLanguage,onCommand…