头图

给大家安利一款我开发的VSCode多语言插件

趁你还年轻
English
---这款插件主要用户是谁?有多语言场景(项目支持中文、英文、日文、韩文等多种语言)的前端开发者。
---我的项目没有多语言场景,安装你这个插件干嘛?可以体验一下嘛,然后看看源码,插件包含的知识点还有趣的。
---包含哪些知识点呢?1.完整的VSCode插件开发流程 2.tsc编译ts文件 3.VSCode文件热更新监测 4.利用缓存增量编译文件 

Github地址:https://github.com/FrankKai/i...

欢迎各位提PR,提issue!!!

i18n-chain

反向选择路径链多语言vscode插件。

通过分析本地项目的多语言文件(js、ts、json),生成snippet.json,帮助开发者实现多语言快速复用,提升开发效率。

演示图

https://imgur.com/tO0oXjk.gif

两种方式

  • i18n-json: 适用于locales文件类型为json的项目。
  • i18n-ts: 适用于locales文件类型为ts file的项目。

安装及使用

  1. 插件市场搜索i18n-chain,安装即可
  2. 配置多语言文件目录 Preferences->Settings->User->Extensions->i18n-chain(例如,配置Locale Path,默认路径为/src/locales/zh)
  3. Command+Shift+P => i18n-json(Locale Path目录中的内容为json文件) 或者 Command+Shift+P => i18n-ts(Locale Path目录中的内容为ts文件)
  4. 键入i18n-后选择需要的链即可。

例如:

{
  "foo": "知道了",
  "foo.bar": "知道了",
  "foo.bar.baz": "知道了",
}
i18n-知道了

=>

1.foo

2.foo.bar

3.foo.bar.baz

=>

foo.bar.baz

原理图

多语言插件 (1).png

FAQ

生成失败

运行命令后,可以查看.vscode目录下的i18n-chain.code-snippets是否有内容。
没有的话,检查Locale Path配置的目录格式,是否与执行的命令一致。

开发说明

开发调试

  • vscode执行Extension
  • 找一个扩展开发宿主项目测试
  • 插件代码有更新时,需要yarn compile编译并且点击右上角刷新按钮,保持扩展开发宿主内的插件为最新态

仅编译

yarn test-compile

生成本地vsix包

yarn build

欢迎各位提PR,提issue!!!

阅读 729

趁你还年轻,做个优秀的前端工程师
努力成为优秀的前端工程师! 文章在微信公众号:大大大前端 同步更新,期待你的关注~
4k 声望
4.1k 粉丝
0 条评论
4k 声望
4.1k 粉丝
文章目录
宣传栏