对于一个好的 vscode 插件,若不支持国际化委实可惜,本文介绍一种简单的 i18n 的做法,希望对各位插件开发者有所帮助。这里会从另一个大名鼎鼎的插件(code-settings-sync)借用部分代码,列位看官请耐心看下去。
让我们用一个简单的插件工程演示国际化的做法:
熟悉插件开发的各位应该看出来了,这其实就是将插件工程产生器所生成的代码进行了国际化。缺省情况下生成的工程代码会在运行之后显示“Hello World!”。
首先,创建插件工程:
yo code
假设插件工程名为:i18n,进入工程目录,在 package.json 中增加 publisher,示例如下:
"publisher": "dteam",
接下来,从 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 替换显示内容完成国际化。这里有两处:
{
"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 检查之外,因为本来就是从外部工程引入的代码,去检查它也就没有必要了。
觉得有帮助的话,不妨考虑购买付费文章来支持我们 🙂 :
付费文章