1. 起因

國際化是我們目前開發(fā)工作中非常重要的一環(huán)。對于老項(xiàng)目，我們可以通過便捷的方式對中文文案進(jìn)行批量國際化；但是對于新增的功能或者模塊開發(fā)，一般還是開發(fā)同學(xué)對文案逐個進(jìn)行國際化。我自己的開發(fā)流程一般是這樣的：

開發(fā)中直接寫上中文（1） -> 功能開發(fā)完成后開始做國際化（2） -> 找到中文文案（3）-> 美杜莎創(chuàng)建key（4） -> 美杜莎文案翻譯（5） -> 代碼中增加該translationKey（6） -> 給該key添加注釋（對應(yīng)的中文）（7）-> 復(fù)制key （8）-> 再找回剛剛中文文案的位置（9） -> 粘貼key，替換中文（10） -> 下個文案同流程處理，重復(fù)（3）。

可以看出這個過程相當(dāng)?shù)姆爆?#xff0c;存在很多復(fù)制粘貼的步驟，那么是否可以通過一些方式來省去這些人肉的操作，更省力一點(diǎn)呢？ 由此，我想可以搞個簡單的VSCode插件來將（8~10）這幾步簡化下，基本思路是選中中文文案后，可以自動將文案替換成對應(yīng)的key，這樣就無需反復(fù)復(fù)制粘貼。

下文主要講下我學(xué)習(xí)和開發(fā)插件的過程以及最終效果。

2. VSCode插件實(shí)現(xiàn)

2.1 初始化

2.1.1 腳手架

為方便開發(fā)，微軟提供了vscode插件的代碼生成器，我們可以使用Yeoman來快速項(xiàng)目腳手架，如下：

npm install -g yo generator-code yo code

運(yùn)行后，會看到如下提示：

到此我們的項(xiàng)目就初始化完成了，可以簡單看下工程結(jié)構(gòu)

2.1.2 工程結(jié)構(gòu)

如下圖所示，其中extension.ts和package.json是我們主要關(guān)注的兩個文件。

2.2 開發(fā)

首先我們看下extension.ts這個文件的實(shí)現(xiàn)：

// The module 'vscode' contains the VS Code extensibility API // Import the module and reference it with the alias vscode in your code below import * as vscode from 'vscode';// this method is called when your extension is activated // your extension is activated the very first time the command is executed export function activate(context: vscode.ExtensionContext) {// Use the console to output diagnostic information (console.log) and errors (console.error)// This line of code will only be executed once when your extension is activatedconsole.log('Congratulations, your extension "test" is now active!');// The command has been defined in the package.json file// Now provide the implementation of the command with registerCommand// The commandId parameter must match the command field in package.jsonlet disposable = vscode.commands.registerCommand('test.helloWorld', () => {// The code you place here will be executed every time your command is executed// Display a message box to the uservscode.window.showInformationMessage('Hello World from test!');});context.subscriptions.push(disposable); }// this method is called when your extension is deactivated export function deactivate() {}

其中的核心部分是注冊命令即registerCommand部分，這個方法注冊了一個可執(zhí)行的命令，第二個參數(shù)是對應(yīng)的具體實(shí)現(xiàn)。

這樣看來，我只需要在17行對應(yīng)的部分將選中文案并自動替換的部分實(shí)現(xiàn)，就可以達(dá)成我想要的效果了。(＾－＾)V

我們分三步走：

編寫代碼，獲取選中的中文文案

解析項(xiàng)目中的translationKeys.js文件，獲取該段中文文案對應(yīng)的key

替換選中的文案，改為i18next.t('xxx')的寫法

2.2.1 編寫代碼，獲取選中的中文文案

如下圖所示，VS Code提供了如下api，可以用于注冊文本編輯相關(guān)的命令。

回調(diào)方法的入?yún)⑹荰extEditor和TextEditorEdit，可以通過前者獲取到當(dāng)前選中區(qū)域的信息；通過后者對選取內(nèi)容進(jìn)行編輯等操作。如下所示：

textEditor.document.getText(textEditor.selection)

2.2.2 解析項(xiàng)目中的translationKeys.js文件

VSCode提供了api可以讓我們訪問到項(xiàng)目中的根目錄，我們通過文件路徑，讀取到文件內(nèi)容，就可以進(jìn)行解析了。

const translationKeyFilePath = vscode.workspace.rootPath + '/translationKeys.js'; const translationKeysContent = fs.readFileSync(translationKeyFilePath, 'utf8');

再來看下我們的translationKey的文件，長這樣子：

module.exports = ["failed",//未通過"unauthorized",//未授權(quán)"certification_upgraded_tips",//員工「實(shí)名認(rèn)證」升級為「實(shí)人認(rèn)證」，更安全"certification_upgraded_tips_self",//「實(shí)名認(rèn)證」升級為「實(shí)人認(rèn)證」，發(fā)現(xiàn)你未通過實(shí)人認(rèn)證，請重新認(rèn)證"passed",//已通過"real_certification",//實(shí)人認(rèn)證 ];

維護(hù)了一個translationKey的數(shù)組，每個元素后，是其對應(yīng)的中文文案的注釋。為了方便我們第三步的替換，這里我們需要生成一個key和中文的map映射表，常規(guī)處理即可，得到

// 中文及其對應(yīng)的key的map const translationKeysMap = {"已通過": "passed","未通過": "failed", }

2.2.3 替換選中的文案

第二步中我們已經(jīng)得到了處理好的map，這里只需要將文本選取中的內(nèi)容進(jìn)行替換即可，非常簡單，如下所示：

const translationKey = translationKeysMap[textEditor.document.getText(textEditor.selection)]; edit.replace(textEditor.selection, `{i18next.t('${translationKey}')}`)

2.2.4 配置

開發(fā)完成后，還需要在package.json中進(jìn)行一些配置，才能在編輯器中使用這個命令。如下：

"activationEvents": ["onCommand:extension.i18n-tool" ], "contributes": {"commands": [{"command": "extension.i18n-tool","title": "快速翻譯文案"}],"menus": {"editor/context": [{"when": "editorHasSelection","command": "extension.i18n-tool","group": "6_Starling"}]}},

2.3 調(diào)試

開發(fā)過程中，調(diào)試是至關(guān)重要的一部分，VS Code插件的調(diào)試，只需要點(diǎn)擊左側(cè)的「運(yùn)行」按鈕運(yùn)行即可。會自動喚起一個新的VSCode窗口，測試你的插件功能。

2.4 發(fā)布

看這里：https://code.visualstudio.com/api/working-with-extensions/publishing-extension

至此，我們完成了插件的開發(fā)和發(fā)布，可以來看下插件效果~

3. 插件效果

https://www.zhihu.com/video/1251526103782150144

使用了這個插件后，我的文案國際化流程調(diào)整為了：

開發(fā)中直接寫上中文（1） -> 功能開發(fā)完成后開始做國際化（2） -> 找到中文文案（3）-> 美杜莎創(chuàng)建key（4） -> 美杜莎文案翻譯（5） -> 代碼中增加該translationKey（6） -> 給該key添加注釋（對應(yīng)的中文）（7）-> 下個文案同流程處理，重復(fù)（3）-> 自動替換文案

涉及到的文案越多，這個方式越省時省力~

4. 參考

https://code.visualstudio.com/api/references/vscode-api

以上完成了一個非常簡陋版本的文案國際化的VSCode插件開發(fā)，對應(yīng)我自己的開發(fā)效率來說，有一定的提升。但是當(dāng)然這個插件還有許多不完善的地方，比如無法針對帶變量的文案做處理，沒有實(shí)現(xiàn)批量替換，也沒有自動引入i18next庫等等，后續(xù)還是要不斷優(yōu)化。

另外這次實(shí)踐也只探得VSCode插件能力的其中一二，還有很多其他的強(qiáng)大能力沒有涉及到，歡迎大家一起交流、學(xué)習(xí)~~

總結(jié)

以上是生活随笔為你收集整理的vscode 全项目替换_利用vscode插件提升前端国际化开发效率的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。