vscode中国际化插件i18n ally踩坑记

堕落心
7,730 阅读3分钟

1、项目中国际化的困扰

由于项目是面向海外用户的，需要多语言选择，项目使用的技术站为vue2 + elementui，所有引入了i18n来解决此问题。但项目开发中、重构和后续迭代开发过程中却出现了很多新的问题。

  • 文案提取、文案 key 命名、语法转换过程繁琐低效，需要每一条都自己提取到安放的位置，重复操作，语法转换更是难受，十分耗时。
  • 各种文案问题难以排查优化，包括重复定义的文案、失效文案、未提取的中文、错误引用。需要自己一个个去全局匹配，非常的麻烦。
  • 页面制作过程中，无法进行外语页面展示效果的调试，需要自己逐个去翻译。
  • 翻译结果交付较慢，影响提测进度：大部分产品经理翻译文案会先利用翻译工具得到参考的翻译结果，然后再进行微调，当文案较多时，翻译过程比较耗时
  • 代码可读性变差：中文改成 Vue I18n 语法之后，无法直接确认代码中的中文内容

2、相关工具的调研

为了解决问题，网易对此进行了调研。 因网易项目中使用的都是 Vue I18n，因此首先调研了 Vue I18n 相关的 vscode 插件和命令行工具，对比结果汇总如下： image.png 下载量最多的是 i18n-ally，它功能丰富、交互友好，且支持多种国际化插件；而命令行工具中，vue-i18n-cli 支持项目级别的文案批量操作，但是功能实现上存在的问题较多，不是很可靠，vue-i18n-extract 功能比较单一，只支持文案检查。

其次，我们还调研了阿里开源的一套国际化解决方案 kiwi，它集成国际化框架 kiwi-intl、vscode 插件 kiwi-linter、命令行工具 kiwi-cli 为一体，功能比较完整，基本解决了国际化开发中存在的大多痛点，但它并不适用于 Vue 项目。

3、方案选择及踩坑

综合上面的调研结果，项目的实现方案选择vscode插件i18n ally

3.1 安装

在vscode扩展应用中搜索i18n ally，选择下图所示的插件进行安装

插件git地址及文档i18n-ally

image.png

3.2 多语言文件结构

首先需要了解支持的语言环境格式传送门

image.png

我项目中文件格式

image.png

zh.json中

{
  "buffer": "缓冲液",
  "search": "搜索",
  "interpolation": "B: {0}"
}

en.json中

{
  "buffer": "buffer",
  "search": "search",
  "interpolation": "B: {0}"
}

index.js中

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

import localesZh from './zh.json'
import localesEn from './en.json'

const i18n = new VueI18n({
  locale: 'en_US',
  messages: {
    zh_CN: { ...localesZh },
    en_US: { ...localesEn }
  }
})

export default i18n

3.3 启用i18n ally

这里有两种方式：

  • 在VSCode设置文件中设置（全局修改）
  • 在项目文件中找到.vscode文件夹，没有此文件夹的就新增一个，添加settings.json

个人比较喜欢第二种 配置项

{
  "i18n-ally.localesPaths": "src/locales", // 相对于项目根目录的语言环境目录路径
  "i18n-ally.sourceLanguage": "en", // 根据此语言文件翻译其他语言文件的变量和内容
  "i18n-ally.displayLanguage": "en", // 显示语言
  "i18n-ally.keystyle": "nested", // 翻译后变量格式 nested：嵌套式  flat:扁平式
  "i18n-ally.preferredDelimiter": "_",
  "i18n-ally.sortKeys": true,
  "i18n-ally.extract.keygenStrategy": "random", // 生成密钥路径的策略。可以slug，random或empty
  "i18n-ally.extract.keygenStyle": "camelCase", // 翻译字段命名样式采用驼峰
  "i18n-ally.enabledParsers": ["json", "js"],
  "i18n-ally.keysInUse": ["view.progress_submenu.translated_keys", "view.progress_submenu.missing_keys", "view.progress_submenu.empty_keys"],
  "i18n-ally.theme.annotationMissingBorder": "#d37070",
  "i18n-ally.theme.annotationMissing": "#d37070"
}

效果及展示

image.png

3.4 坑点（启用形式第二种的）

  1. .vscode需要放在package.json同级目录下，否则不起作用
  2. settings.json只能管理项目一级，不能多层项目桥套，获取管理多个项目，如下就不起作用 image.png
  3. 项目中需要安装vue-i18n插件，否则i18n ally不起作用，vscode右侧导航栏上不显示插件启用

image.png

avatar
文章
阅读
粉丝