单一语言项目国际化-“i18n-ally”真快i18n ally 是一款 VS Code 编辑器插件，可配合翻译平台实现

大家好，我是CC，在这里欢迎大家的到来～

i18n ally 是一款 VS Code 编辑器插件，可配合翻译平台实现中文和其他语言的转化，并显示转化进度和使用情况。本文就详细介绍如何使用该插件高效实现单一语言项目国际化。

前期准备

创建 JSON 文件

在项目 src/assets/i18n 目录下创建所需文本的 JSON 文件，比如创建像中文文本文件 zh-CN.json。

编辑器配置

在项目根目录下 .vscode 内的 setting.json 配置如下：

{
  "i18n-ally.localesPaths": [
    "src/assets/i18n"
  ]
}

插件配置

插件支持调用三方接口帮助自动翻译转化，可选择的有百度翻译、谷歌翻译或者 ChatGPT 等。

需要配置相应字段，以 ChatGPT 为例：

{
  "i18n-ally.translate.openai.apiModel": "gpt-4",
  "i18n-ally.ignoredLocales": [],
  "i18n-ally.sortKeys": true,
  "i18n-ally.localesPaths": "src/assets/i18n",
  "i18n-ally.keystyle": "nested",
  "i18n-ally.translate.openai.apiKey": "your apiKey",
  "i18n-ally.namespace": true,
  "i18n-ally.displayLanguage": "zh-CN",
  "i18n-ally.pathMatcher": "{locale}.json",
  "i18n-ally.preferredDelimiter": "_"
}

项目配置

在项目中使用国际化文件，安装自己项目中 i18n 的流程进行即可。

下面是使用 Angular 的案例：

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

TranslateModule.forRoot({
  defaultLanguage: lang,
  loader: {
    provide: TranslateLoader,
    useFactory: (createTranslateLoader),
    deps: [ HttpClient ],
  },
}),

细数文案转化场景

以 Angular 项目为例：

Html 文件中文案

<nz-alert nzType="error" [nzMessage]="'WorkSpace.Message.Error' | translate" nzShowIcon [nzAction]="alertAction"></nz-alert>

Component 文件中文案

this.message.success(this.translate.instant('WorkSpace.Prompt.History.Copy.Success'));

Modal 中文案

<ng-template #Personal>
  <div style="display: flex; gap: 16px;">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
      <path d="M4.7998 21.0001C4.7998 19.0905 5.55837 17.2592 6.90864 15.9089C8.2589 14.5587 10.0902 13.8001 11.9998 13.8001C13.9094 13.8001 15.7407 14.5587 17.091 15.9089C18.4412 17.2592 19.1998 19.0905 19.1998 21.0001H17.3998C17.3998 19.5679 16.8309 18.1944 15.8182 17.1817C14.8055 16.169 13.432 15.6001 11.9998 15.6001C10.5676 15.6001 9.19412 16.169 8.18143 17.1817C7.16873 18.1944 6.5998 19.5679 6.5998 21.0001H4.7998ZM11.9998 12.9001C9.0163 12.9001 6.5998 10.4836 6.5998 7.5001C6.5998 4.5166 9.0163 2.1001 11.9998 2.1001C14.9833 2.1001 17.3998 4.5166 17.3998 7.5001C17.3998 10.4836 14.9833 12.9001 11.9998 12.9001ZM11.9998 11.1001C13.9888 11.1001 15.5998 9.4891 15.5998 7.5001C15.5998 5.5111 13.9888 3.9001 11.9998 3.9001C10.0108 3.9001 8.3998 5.5111 8.3998 7.5001C8.3998 9.4891 10.0108 11.1001 11.9998 11.1001Z" fill="#525866"/>
    </svg>
    {{ 'Layout.Personal' | translate }}
  </div>
</ng-template>

@ViewChild('Personal') Personal!: TemplateRef<any>;

this.modal.create({
  nzTitle: this.Personal,
  nzContent: PersonalComponent,
  nzFooter: null,
});

使用流程

这部分操作其实比较自由，可以探索后调整适合自己的操作方式。

1、插件检测中文文案

在安装插件后会检测出项目中的待转化文案，并添加下划线标识，点击快速修复会提示提取文案选项。

2、提取文案到文件中

点击提取文案到 i18n，会提示填写需要保存的路径。

3、配置文案位置

添加保存的路径，使用.表示包含关系（也支持自定义）；确认后会进行代码的更改，将文案替换为可转化的文案配置，像这样{{ 'Layout.Personal' | translate }}。

4、翻译

在项目中提取出文案后，可以调之前配置的插件接口，一键翻译之前提前的所有文案，并展示转化进度。

总结

通过 i18n ally 插件的引入，我们不仅高效完成了项目的国际化改造，更重要的是建立了一套可持续、可扩展的国际化体系。这个过程充分证明：选择合适的工具，结合科学的流程，能够将原本复杂繁琐的国际化工作变得高效而优雅。

国际化不是项目的终点，而是产品走向更广阔市场的起点。希望本文的经验能够为正在或即将进行国际化改造的团队提供有价值的参考。

工具链接：i18n ally - github.com/lokalise/i1…

单一语言项目国际化-“i18n-ally”真快