前端 vscode 国际化代码辅助扩展

97 阅读2分钟

本扩展没那么高大上,目前仅仅是为了解决项目上重复编写国际化代码的痛楚。

简单描述下,就是要写的翻译,搜索是否存在翻译,存在复制键值对,编写国际化代码这样反复切换编辑文档的代码工作。

功能

  1. 输入提示,在输入符合国际化扩展模板的函数调用时会触发可输入候选项的国际化语言列表,确定后返回要写的国际化代码内容(就是上面那一堆需要先查 key value 再填进去的东西)
  2. 悬浮预览国际化相关信息 (所有 key 相关翻译,变量是否填写检测,描述上不是那么惬当)。
  3. 自定义跳转翻译文件位置(默认语言文件位置)
  4. 复制默认国际化语言快速生成国际化代码。

输入国际化函数提示.png

国际化信息悬浮提示.png 我的扩展是基于模板工作模式,所以应该只要算 JavaScript 范畴的代码应该都可以行的通。

快速搜索国际化代码入口1.png

使用

  1. 首先去配置国际化插件配置,有几个比较重要的配置。
    • Scan Folders 如果目录不是 locales 或 locale 的话,需要配置它。
    • Main Language 默认语言这个非常重要,请设置自己项目中国际化用到的默认语言。
    • Generate Templates 生成模板种类,非常重要扩展的工作都是基于这个核心触发提供的,需要你提供一个或多个日常常用的国际化代码,并将他们的国际化 key 字面量 替换成 {{id}} 国际化默认语言替换成 {{msg}} 如果有变量的话,则把变量对象字面量替换 {{variable}} 。
  2. 扫描国际化目录,扫描成功,如果项目存在繁体语言,使用扩展提供的国际化目录在里面覆盖国际化语言类型,这样扩展正确识别语言类型
  3. 接下来,就是愉快的编码工作了。
  4. 至于其他一些功能暂时都是摆设,-_-b。

零碎的话

开发这个扩展一开始我自己一个构思慢慢完成,到后面推荐给同事使用。感谢同事的建议,我做出功能不像最开始的自己一个设计的那么单薄。

开发这个功能到现在对自己的代码有不满,有收获,有骄傲,有感谢。

如果有什么 bug,可以到扩展仓库 issue 提,我这边有空的话会修复。

扩展下载

marketplace.visualstudio.com/items?itemN…