VSCode插件开发 国际化

内容来源于：vscode 插件开发技巧：国际化

对于一个好的 vscode 插件，若不支持国际化委实可惜，本文介绍一种简单的 i18n 的做法，希望对各位插件开发者有所帮助。这里会从另一个大名鼎鼎的插件（code-settings-sync）借用部分代码，列位看官请耐心看下去。

让我们用一个简单的插件工程演示国际化的做法：

• 在中文情况下，命令名称为中文，输入命令后弹出的消息通知框显示也为中文。
• 反之，若在英文情况下，上面各项显示亦为英文。

熟悉插件开发的各位应该看出来了，这其实就是将插件工程产生器所生成的代码进行了国际化。缺省情况下生成的工程代码会在运行之后显示“Hello World！”。

创建工程并添加 publisher

首先，创建插件工程：

yo code

假设插件工程名为：i18n，进入工程目录，在 package.json 中增加 publisher，示例如下：

“publisher”: “dteam”,

复制 localize.ts

接下来，从 code-settings-sync 工程复制 localize.ts 到 src 目录下，同时搜索“rootPath = extensions.getExtension …”，将其改为以下代码：

rootPath = extensions.getExtension(“dteam.i18n”)?.extensionPath;

其中的 dteam.i18n 为当前插件的 id ，其格式为：publisher.name 。到此，i18n 的基础设施部分已经完成，接下来就是编写相应的语言包。

编辑语言包

基本上，i18n 的原理都一样，在程序中使用语言无关的 message_id ，然后在运行时判断当前环境的语言，由此加载对应的语言包，最后将 message_id 替换成实际的内容。在这里，语言包放在工程根目录下，与 package.json 同级。并且语言包的格式为：package.nls{0}.json。对应中英文语言包，其名字和内容如下：

• package.nls.json，英文

  {
    "extension.helloWorld.title": "Greet",
    "extension.helloWorld.message": "Hello, world!"
  }
  

• package.nls.zh-cn.json，中文

  {
    "extension.helloWorld.title": "问候",
    "extension.helloWorld.message": "你好，世界！"
  }
  

使用 message id

接下来，使用 message id 替换显示内容完成国际化。这里有两处：

• 命令名称，修改 package.json

  {
    "command": "extension.helloWorld",
    "title": "%extension.helloWorld.title%"
  }
  

• 消息通知，修改 extension.ts

  vscode.window.showInformationMessage(localize("extension.helloWorld.message"));
  

运行

运行并切换语言会看到实际的效果。

写在最后

因为 [code-settings-sync(https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync) 本身的许可证为 MIT ，故复制代码到工程中使用并没有什么问题。同时，由于其本身已经有很完善的国际化功能（如还支持消息参数），故直接复制过来使用是最简单的做法。

虽然在每次使用中都需要改 localize.ts 中插件的 id ，但就目前看来这其实是最简单的方式。虽然可以传入 context 来将插件目录获取动态化，但这也导致在初始化时需要传入参数，使用上反而不如现在简洁和方便。并且，考虑到这里就是以复制源码的方式来复用，那么直接改一处代码来获得使用上的便捷其实也是可以容忍的。

最后，假若你跟我们一样采用了gts ，那么记得在 tslint.json 中记得将 src/localize.ts 排除到 lint 检查之外，因为本来就是从外部工程引入的代码，去检查它也就没有必要了。