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-
- 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
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.
Nice work Mahesh!
Thanks DJ!, This is my first opensource contribution, eventhough it's a small one, i loved doing it ๐
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'. ๐
๐ thanks Krishna.. u should, u will like it!!
Thanks Mohit :). I am surely not there at teaching level, yet. But one day for sure ?
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:
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
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.
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.
A new version is released, now .json file is also supported and now the API looks for pattern {{key}} (for manifest.json texts)
Excellent blog Mahesh..!!
Thanks for sharing knowledge ๐
Thanks Venky ๐
Hi Mahesh,
great work, but i have issues with my multirepo project.
After setting
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
because the whole syntax highlighting is killed inside properties editor.
Solution seems to be quite cool for monorepo's.
Regards Holger
Nice... I will really use it a lot. Please keep bringing more nice tools for VS Code