vscode 全项目替换_利用vscode插件提升前端国际化开发效率

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是我们主要关注的两个文件。