1. 起因

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

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

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

下文主要講下我學習和開發插件的過程以及最終效果。

2. VSCode插件實現

2.1 初始化

2.1.1 腳手架

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

npm install -g yo generator-code yo code

運行后，會看到如下提示：

到此我們的項目就初始化完成了，可以簡單看下工程結構

2.1.2 工程結構

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

2.2 開發

首先我們看下extension.ts這個文件的實現：

// 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部分，這個方法注冊了一個可執行的命令，第二個參數是對應的具體實現。

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

我們分三步走：

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

解析項目中的translationKeys.js文件，獲取該段中文文案對應的key

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

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

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

回調方法的入參是TextEditor和TextEditorEdit，可以通過前者獲取到當前選中區域的信息；通過后者對選取內容進行編輯等操作。如下所示：

textEditor.document.getText(textEditor.selection)

2.2.2 解析項目中的translationKeys.js文件

VSCode提供了api可以讓我們訪問到項目中的根目錄，我們通過文件路徑，讀取到文件內容，就可以進行解析了。

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

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

module.exports = ["failed",//未通過"unauthorized",//未授權"certification_upgraded_tips",//員工「實名認證」升級為「實人認證」，更安全"certification_upgraded_tips_self",//「實名認證」升級為「實人認證」，發現你未通過實人認證，請重新認證"passed",//已通過"real_certification",//實人認證 ];

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

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

2.2.3 替換選中的文案

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

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

2.2.4 配置

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

"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 調試

開發過程中，調試是至關重要的一部分，VS Code插件的調試，只需要點擊左側的「運行」按鈕運行即可。會自動喚起一個新的VSCode窗口，測試你的插件功能。

2.4 發布

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

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

3. 插件效果

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

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

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

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

4. 參考

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。