背景
最近一直在做国际化的业务，就是将一个已有的系统支持切换语言。
公司用的是Umi框架，内置i18n的配置。
Umi框架中就是在locales文件夹中写两套一样Key的语言配置，然后用国际化钩子传入Key，就会根据对应的系统语言切换。
import { getLocale, useIntl, getIntl } from "umi";
const { formatMessage } = useIntl(); // 国际化钩子
formatMessage({ id: "pages.Menu1.Hello" }) // 你好
- 方案1：国际化配置中的Key用
"pages.Menu1.Hello": "你好"英文这种- 缺点：不同页面下相同的翻译会造成多个不同的Key，且业务代码中很多这样长长的转换，这样也导致后续改别人写的代码时候很难一下定位到对应的代码处！
- 优点：除了符合规范、毫无优点
- 方案2：国际化配置中的Key用
你好: "你好"中文这种- 优点：同一个文字翻译全局唯一，比如Key是"你好"，就不会出现第二个"你好"，这样还有一个好处就是locales中不需要分更小的文件夹区分不同的模块；定位代码很方便！
- 缺点：除了有点不规范，其他当都是优点😂
因为项目里面的字段都是中文，如果还要把中文改成方案1的Key啄食埋坑，于是我果断选择了方案2...
封装t函数
因为每个文件中都需要导入
getIntl,再调用拿到formatMessage之后再去给文字做国际化处理略显麻烦
于是封装了一下，使得在任何文件中引入即可使用。
/**
* 支持在非组件内使用的国际化函数
* @param {string} key
* @param {object} [values] 用于向国际化字符串中传递动态值，这些值会在最终输出的字符串中替换对应的占位符。
* @returns {string}
* @example 比如 "Hello, {name}!"，formatMessage函数会根据values对象中的name替换文本中的{name}占位符。
*/
export function t(key, values = {}) {
return formatMessage({ id: key }, values);
}
开发VsCode插件
怎么说呢，就算这样了，改起国际化但还是很麻烦，因为要在每个文件里面找到中文字，然后给他包裹一层这个
t("你好")函数，有些在标签中的文字，还需要用jsx语法用{t("你好")}这样包裹起来
如果有一个快捷键，一键包裹这个
t函数并且能智能判断jsx语法就好了.....
于是去找朋友们寻求帮助...
看的出来，他们都被国际化"糟蹋"过...
于是我就去研究开发插件去了，了解了大概的插件开发流程后，开局一双手，实现全靠问，你说要问谁，必然是chatGPT，谁家好人真自己写啊😂，经过2小时的对机器人死缠烂打，终于是实现了。当然在发版插件的时候还是遇到了好些困难的😂
Wrap Text With T（VsCode V 1.89.0 版本以上）
将一个已有的项目支持国际化时避免不了以下操作： "你好" -> t("你好") 或者是 {t("你好")}
该插件实现了鼠标双击选中文字（不包含双引号，更快捷）通过
ctrl/cmd+alt+z的快捷键方式快速嵌套一个t函数该插件将会智能判定 jsx 语法
import { t } from "@/utils/method"; // 项目中自己封装的翻译函数
{title: "物料编号"} 双击文字+快捷键-> {title: t("物料编号")}
<span>物料编号</span> 双击文字+快捷键-> <span>{t("物料编号")}</span> // jsx智能识别
<Form.Item label="车间区域" placeholder="请选择"/>
双击文字+快捷键->
<Form.Item label={t("车间区域")} placeholder={t("请选择")}/>
源码
源码中每行都有清楚的注释，很适合第一次学习开发插件的同学上手（易上手）...
插件进阶的想法
有同事说，可以进阶开发个一键就能将当前文件中所有中文智能包裹上
t函数的插件，这样就不用一个一个去快捷键转换了...
好想法，但是当然要把机会留给广大的网友们了😂，如果有掘友们实现了，务必踢我😍