站長資訊網(wǎng)本篇文章帶大家從0開發(fā)一個(gè)vscode變量翻譯插件，本文會(huì)從四個(gè)方面來完整的展示整個(gè)插件從功能設(shè)計(jì)到發(fā)布的完整歷程，希望對(duì)大家有所幫助！
需求的起因是英語渣在開發(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ì)的單詞不知道啥意思影響效率
環(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
打開后會(huì)自動(dòng)建立一個(gè)工作區(qū)，并生成這些文件，可根據(jù)自己需要對(duì)文件進(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)試按鈕
打開后會(huì)彈出一個(gè)新的vscode窗口，這個(gè)新的窗口就是你的測(cè)試環(huán)境(擴(kuò)展開發(fā)宿主)，你做的插件功能就是在這個(gè)新的窗口測(cè)試，打印的消息在前一個(gè)窗口的調(diào)試控制臺(tái)中,比如自帶的例子，在我們新窗口 cmd/ctrl+shift+p后輸入Hello world后會(huì)在前一個(gè)窗口的控制臺(tái)打印一些信息
到這里，開發(fā)準(zhǔn)備環(huán)境就準(zhǔn)備好了，下一步就是開始正式的插件功能開發(fā)
插件功能開發(fā)
插件開發(fā)中，有兩個(gè)重要的文件，一個(gè)是 package.json,一個(gè)是 extention.js
重要文件說明
package.json
-
activationEvents用來注冊(cè)激活事件，用來表明什么情況下會(huì)激活extention.js中的active函數(shù)。常見的有onLanguage,onCommand…
