Technical Articles

Mahesh Palavalli

May 6, 2020 1 minute read

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-

Inline annotations
Machine translation
Hover and edit translation
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:

Default i18n.properties will not be considered, only i18n_locale.properties files are considered.
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

17 Comments

You must be Logged on to comment or reply to a post.

MANU SEBAS BABU SOLOMON

May 7, 2020 at 4:55 am

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

Mahesh Palavalli

Blog Post Author

May 7, 2020 at 6:26 am

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.

DJ Adams

May 7, 2020 at 6:12 am

Nice work Mahesh!

Mahesh Palavalli

Blog Post Author

May 7, 2020 at 6:53 am

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

Krishna Kishor Kammaje

May 7, 2020 at 10:22 am

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'. 🙂

Mahesh Palavalli

Blog Post Author

May 7, 2020 at 2:35 pm

🙂 thanks Krishna.. u should, u will like it!!

Mohit Sharma

May 7, 2020 at 11:48 am

Nice Work Mahesh!!

I wish you start a cool tutorial series some day!! 🙂

Regards,

Mahesh Palavalli

Blog Post Author

May 7, 2020 at 2:37 pm

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

Lennart Meinhardt

May 8, 2020 at 10:23 am

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.

Mahesh Palavalli

Blog Post Author

May 8, 2020 at 1:47 pm

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 ?

Lennart Meinhardt

May 8, 2020 at 3:19 pm

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?

Mahesh Palavalli

Blog Post Author

May 8, 2020 at 6:00 pm

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.

Mahesh Palavalli

Blog Post Author

May 9, 2020 at 11:33 am

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

Venkatesh Manam

May 10, 2020 at 8:53 am

Excellent blog Mahesh..!!

Thanks for sharing knowledge 🙂

Mahesh Palavalli

Blog Post Author

May 15, 2020 at 1:48 pm

Thanks Venky 😉

Holger Schäfer

July 2, 2020 at 12:29 pm

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

Silvano Silva

June 12, 2021 at 12:01 am

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

Technical Articles

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

Update: more information reg. the usage of the plugin

Assigned Tags