i18n国际化vscode插件（du-i18n、i18n Ally）

@ 前端小白

已于 2024-08-02 17:26:59 修改

阅读量496

点赞数 2

文章标签： vscode vue reactjs 小程序

于 2024-08-02 17:26:14 首次发布

本文链接：https://blog.csdn.net/m0_55967670/article/details/140876053

版权

vscode搜索du-i18n、i18n Ally插件安装
在这里插入图片描述
安装完毕后在vscode代码中右键=>国际化=>设置，然后会在项目中生成一份du-i18n的配置内容，du-i18n.config.json （如下所示）

{
	"quoteKeys": [ //可以配置引用key
		"this.$t",
		"$t",
		"i18n.t"
	],
	"defaultLang": "zh",//默认取tempLangs第一个元素
	"tempLangs": [ //扩展语言集合
		"zh",
		"en"
	],
	"langPaths": "**/src/i18n/locale/**", //读取的语言包路径
	"transSourcePaths": "**/src/i18n/source/**",//本地同步翻译的源文案文件夹
	"tempPaths": "**/src/i18n/message/**",//生成语言包路径
	"tempFileName": "",//新增翻译文案的文件名，若不指定，每次生成随机文件名
	"multiFolders": [ // 复杂文件夹，用于分割模块
		"src",
		"pages"
	],
	"uncheckMissKeys": [],
	"isSingleQuote": true,
	"isOnlineTrans": true,
	"baiduAppid": "", // 百度翻译的Appid
	"baiduSecrectKey": ""// 百度翻译的SecrectKey
}

（需要配置百度翻译的Appid 和百度翻译的SecrectKey,否则公用翻译额度可能会不够，导致无法生成翻译内容）

使用

在这里插入图片描述

配置完成后可在可以在项目具体内容中扫描中文、扫描完成后插件会根据du-i18n.config.json文件中配置的tempPaths生成语言包内容
在这里插入图片描述

进入生成的语言包文件中选择在线翻译，此时如果你的baiduAppid和baiduSecrectKey没有配置的话可能翻译不成功
在这里插入图片描述
翻译完成后我们需要将语言包加到i18n总配置中

注意：

在这里插入图片描述
当前的i18n Ally提示可能会有问题，如果有问题的话，需要检查.vscode中的settings.json的配置项，如下 :

{
    "i18n-ally.localesPaths": [
        "src/i18n/locale"
    ],
    "i18n-ally.namespace": true,
    "i18n-ally.pathMatcher": "{locale}/**.json",
    "i18n-ally.keystyle": "nested",
    // "i18n-ally.keystyle": "flat"
}