DTeam 技术日志

Doer、Delivery、Dream

vscode 插件开发技巧:国际化

胡键 Posted at — Mar 24, 2020 阅读

对于一个好的 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。对应中英文语言包,其名字和内容如下:

{
  "extension.helloWorld.title": "Greet",
  "extension.helloWorld.message": "Hello, world!"
}
{
  "extension.helloWorld.title": "问候",
  "extension.helloWorld.message": "你好,世界!"
}

使用 message id

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

{
  "command": "extension.helloWorld",
  "title": "%extension.helloWorld.title%"
}
vscode.window.showInformationMessage(localize("extension.helloWorld.message"));

运行

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

写在最后

因为 code-settings-sync 本身的许可证为 MIT ,故复制代码到工程中使用并没有什么问题。同时,由于其本身已经有很完善的国际化功能(如还支持消息参数),故直接复制过来使用是最简单的做法。

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

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


相关文章