Skip to Content
Technical Articles

Open Source i18n-ally now supports SAP UI5 in VS Code

 

Recently I found that there is an all powerful i18n extension for VS Code called i18n-ally. It has support for many frameworks, but SAP UI5 was not on the list and here I am writing this blog as it supports SAP UI5 now πŸ™‚

 

 

Why I say i18n-ally is all powerful? It supports-

  1. Inline annotations
  2. Machine translation
  3. Hover and edit translation
  4. Editor UI, with missing translation usage report and much more..

I’ll just stop writing and let’s look at the below video.

 

Git Hub Repo: https://github.com/antfu/i18n-ally

 

To use it for UI5 application in VSCode, just add the below in .vscode settings.json

{
"i18n-ally.enabledFrameworks": [
    "ui5"
]
}

or if the package.json file has the “@ui5/cli”Β  devDependenies, then also i18n-ally recognises it as a UI5 framework.

 

 

Although I haven’t developed this extension from the scratch, I only provided the support for SAP UI5 and it was also easily extendable as Anthony Fu did a great job designing it well and many thanks to Anthony for creating this wonderful extension!

 

So don’t wait anymore, go a head and install the plugin from vs code marketplace

https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally

 

Note before using the extension:

  1. Default i18n.properties will not be considered, only i18n_locale.properties files are considered.
  2. Comments are also excluded, even if there are any existing comments, they will be removed once you start using i18n ally. Who needs comments in i18n anyway? πŸ˜€ JK, if anyone is interested, we can provide support for it πŸ™‚

 

Update: more information reg. the usage of the plugin

Framework supported matches, that will automatically fetch i18n values and show it as annotations

'\\{(i18n>{key})\\}',
'getResourceBundle\\(\\)\\.getText\\([\'"`]({key})[\'"`]'

If you want to add more, add like below in the settings.json file

"i18n-ally.regex.usageMatchAppend": [ "getText\\([\\'\"]({key})[\\'\"]" ]

 

Annotations will be shown in .js and .xml files (currently).

 

If your i18n files are in different folders, use the below setting

"i18n-ally.localesPaths": "webapp/i18n"

 

for more information check here:

https://github.com/antfu/i18n-ally/wiki/Configurations

 

 

Have fun!

-Mahesh

16 Comments
You must be Logged on to comment or reply to a post.
  • Whoa! Thats pretty cool. I belive in that case we dont have to maintain the translation for each and every file. Maintaining it only for EN should do the trick?

    – Manu

    • Thanks for the feedback πŸ™‚

      you still have to maintain it, this plugin does some level of automation only.

      For eg. you still have to create separate i18n files manually for different languages. But what advantage this plugin offers is that you don’t need to manually open and type translations in every file, you have a editor ui, where u can see all missing translation and from there you can manually enter translation or fetch it automatically from google. or you can hover over the i18n key in view and directly edit translations, which is also pretty cool.

      Along with that it offers some powerful inline annotations (instead of showing i18n keys, it shows the text directly) and many other features, which i fell are even better than what SAP webide offers.

       

  • Thanks a lot for the blog, I haven’t heard of i18n-ally before. I think it can make working with i18n a lot easier.

    I have some problems configuring it though. It does not recognize usages in manifest.json, e.g. {{appTitle}}. I tried setting a custom regex in VS Code settings for that but it does not seem to work:

    {{(.+)}}

    Also it does not recognize texts read in code, in my projects I have a utility function “getText” in all the controllers. I expected this regex to work:

    [^\w\d]this\.getText\(['"`](.*)['"`]\)

    Is there any documentation on how this should be configured? It would also be helpful to see the default configuration of framework “ui5” in order to see what is possible and what could be changed.

    • You can try this below setting in settings.json

      "i18n-ally.regex.usageMatchAppend": [ "getText\\([\\'\"]({key})[\\'\"]" ]

      getText is kind of a generic method so it is not added, but using the above setting manually in your .vscode settings.json will do the trick for you.

      Reg. the manifest.json text, it’s not currently supported. You will get it in next release, will inform you about :).

      I will update the blog with possible matches that are currently supported.Β  Thanks for the feedback πŸ™‚

      • Thanks for the quick reply πŸ™‚ I see that you escape all the characters in JSON config and this makes sense, but is this also necessary when configuring via VS Code settings page?

        • I actually copied it from the ts code and pasted it over in the settings and tested it πŸ˜€ . Yeah you are right I don’t need to escape single quote(‘) but others are required.

          "getText\\(['\"]({key})['\"]"
          
          \\(  - need to escape '(' else it will be considered as a group in regex
          \" need to escape that as well as it's already inside double quote
          {key} is to find the i18n key in the group ( )

          PS: I am new to this stuff, so there might be mistakes in my above understanding, let me know if it can be done better

          PS.PS: I dont’ know why double backward slash needs to be used ‘\\’ to escape ‘(‘ ,Β  I thought it was only needed while writing ts code, but my editor is giving me an error if i use one backward slash to escape ‘(‘ and so i used double backward slash to escape it.

  • Hi Mahesh,
    great work, but i have issues with my multirepo project.

    After setting

    i18n-ally.localesPaths

    it worked for me, but trying usage report it also reports failing keys from all found ui5 projects.

    I think the project currently does not support such multirepos, because it analyzes the whole workspace.

    Maybe you also have a tip for me, how to use ‘ character inside translation like

    xtxt.Text=Use Layer's name.

    because the whole syntax highlighting is killed inside properties editor.

    Solution seems to be quite cool for monorepo’s.

    Regards Holger