Skip to Content
Technical Articles
Author's profile photo Mahesh Palavalli

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

Assigned Tags

      17 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo MANU SEBAS BABU SOLOMON
      MANU SEBAS BABU SOLOMON

      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

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      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.

       

      Author's profile photo DJ Adams
      DJ Adams

      Nice work Mahesh!

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      Thanks DJ!, This is my first opensource contribution, eventhough it's a small one, i loved doing it ๐Ÿ™‚

      Author's profile photo Krishna Kishor Kammaje
      Krishna Kishor Kammaje

      Wonderful Mahesh. I have not yet started using VS Code for UI5, but will try it out.

      I am happier for the 'first opensource contribution'. ๐Ÿ™‚

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      ๐Ÿ™‚ thanks Krishna.. u should, u will like it!!

      Author's profile photo Mohit Sharma
      Mohit Sharma
      Nice Work Mahesh!!
      I wish you start a cool tutorial series some day!! ๐Ÿ™‚
      Regards,
      MS
      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      Thanks Mohit :). I am surely not there at teaching level, yet. But one day for sure ?

      Author's profile photo Lennart Meinhardt
      Lennart Meinhardt

      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.

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      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 ?

      Author's profile photo Lennart Meinhardt
      Lennart Meinhardt

      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?

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      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.

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      A new version is released, now .json file is also supported and now the API looks for pattern {{key}} (for manifest.json texts)

      Author's profile photo Venkatesh Manam
      Venkatesh Manam

      Excellent blog Mahesh..!!

      Thanks for sharing knowledge ๐Ÿ™‚

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      Thanks Venky ๐Ÿ˜‰

      Author's profile photo Holger Schรคfer
      Holger Schรคfer

      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

      Author's profile photo Silvano Silva
      Silvano Silva

      Nice... I will really use it a lot. Please keep bringing more nice tools for VS Code