V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
minglanyu
V2EX  ›  前端开发

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

  •  
  •   minglanyu · 2022-07-20 13:57:38 +08:00 · 902 次点击
    这是一个创建于 880 天前的主题,其中的信息可能已经有所发展或是发生改变。
    写在前面:
    ---这款插件主要用户是谁?有多语言场景(项目支持中文、英文、日文、韩文等多种语言)的前端开发者。
    ---我的项目没有多语言场景,安装你这个插件干嘛?可以体验一下嘛,然后看看源码,插件包含的知识点还有趣的。
    ---包含哪些知识点呢? 1.完整的 VSCode 插件开发流程 2.tsc 编译 ts 文件 3.VSCode 文件热更新监测 4.利用缓存增量编译文件 
    

    Github 地址: https://github.com/FrankKai/i18n-chain

    欢迎各位提 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
    

    原理图

    image.png

    FAQ

    生成失败

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

    开发说明

    开发调试

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

    仅编译

    yarn test-compile
    

    生成本地 vsix 包

    yarn build
    

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

    1 条回复    2023-04-22 11:40:27 +08:00
    houchangxiaowang
        1
    houchangxiaowang  
       2023-04-22 11:40:27 +08:00
    👍🏻
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3228 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 00:47 · PVG 08:47 · LAX 16:47 · JFK 19:47
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.