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

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

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

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

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

• 環(huán)境搭建

• 插件功能開(kāi)發(fā)

• 插件打包發(fā)布

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

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

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

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

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

環(huán)境搭建

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

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

  //安裝 yarn global add yo generator-code

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

  yarn global add vsce

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

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

  到這一步后，選擇直接打開(kāi)，Open with code

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

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

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

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

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

插件功能開(kāi)發(fā)

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

重要文件說(shuō)明

package.json

• activationEvents用來(lái)注冊(cè)激活事件，用來(lái)表明什么情況下會(huì)激活extention.js中的active函數(shù)。常見(jiàn)的有onLanguage,onCommand…