lokalise / i18n-ally Goto Github PK

If you use a plain tree to organize the translations in the JSON, the extension won't work correctly.

It will detect the translation on it's own menu but won't detect it on inline annotations like this example:

But if I use the classic tree in JSON it will work correctly:

Hi,

We use .json5 in our project to enable the use of comments in locales files.

Is it possible to add the support of this extension please?

Thanks in advance.

What framework do you want to have? Please provide links of its i18n solution/package.
https://github.com/ilteoood/flutter_i18n

Please provide some overall screenshots about how the i18n usage would be like
flutter_i18n uses FlutterI18n.translate(buildContext, 'your.key')

Please provide a minimal starter project

Taken from the flutter_i18n repo:
example.zip

Steps to reproduce

1. Create a file like dosomething.spec.ts
2. Add the line it('does stuff', () => {...})
3. Get info highlights saying `Translation of "does stuff" is missing

I guess it sees it() and assumes it's the t function being called as t()

Using the latest version i see something wrong
The screenshot should be enough. It tells me that a translation is missing. However it does not appear in missing (should for both languages as the key does not exist in JSON).

Describe the bug
Not sure if macOS is missing the font, the ArrowUpRight icon is shown as a missing character (a blank square)

Is it just me or is it a macOS thing?
Maybe we can use another character on macOS?

To Reproduce
Steps to reproduce the behavior:

1. Go to any file with i18n keys
2. Hover on the key
3. Wait until the tooltip is shown
4. See error

When the nesting is done outside the language file it is not detected and the translation is reported as missing.

Steps to reproduce the behavior:

1. Create several language files, like "a.json", "b.json" etc. with a translation entry "test" in "a.json"
2. Configure Vue i18n in the following :

const i18n = new VueI18n({
	locale: 'nl',
	fallbackLocale: 'en',
	messages: {
		'en': {
			'A': require('Vue/locale/en/a.json'),
			'B': require('Vue/locale/en/b.json')
		},
		'nl': {
			'A': require('Vue/locale/nl/a.json'),
			'B': require('Vue/locale/nl/b.json')
		}
	}
});

3. Try using the translation in a Vue single file component like this ({{ $t("A.test") }})
4. The above is valid structure and works properly, but i18n Ally says the string translation is missing.

I understand, that parsing such a complex case might be heavy and next to impossible, so maybe a a solution where the user can tell i18n Ally that if (and how) a given lang file is nested in the code would be acceptable.

Every version after that is not working anymore, some don't even display the icon in the toolbar, and the last one that does show it it's all empty, it seems that it doesn't get any locale file.

If you use single or double quotes to define the key to translate like $t('FOO') or $t("FOO") it will show the inline translation correctly

but if backticks are used $t(`FOO`) then it doesn't work

Normally this wouldn't be a issue because everyone use the quotes, but in my case I forgot about them after placing a variable inside the string and then removing that variable, leaving the string with backticks.

Describe the bug
A clear and concise description of what the bug is.

Extension Version
1.4.6

Framework/i18n package you are using
react-i18next

To Reproduce
Steps to reproduce the behavior:

1. ko.json add key , value
   "반려" : '반려"
2. not work i18n-ally support

Extension Log
Go to View -> Output -> i18n Ally, and paste the content below. You should mask any sensitive information

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: windows 10
• Version :17763

I have settled the en locale as display and source, but when I tried to use the automatic translate button, all value returns like ????, so how does this translate button works ? Am I using the wrong way ?

Describe the bug
A clear and concise description of what the bug is.

Extension Version
i18n Ally

Framework/i18n package you are using
vue-i18n

To Reproduce
Steps to reproduce the behavior:
ex:
vue page
{{ $t('common.'+type)}}
Can't be detected, the whole page will have problems, not displayed, and the layout is disordered

Desktop (please complete the following information):
版本: 1.41.0 (user setup)
提交: 9579eda04fdb3a9bba2750f15193e5fafe16b959
日期: 2019-12-11T17:59:52.065Z
Electron: 6.1.5
Chrome: 76.0.3809.146
Node.js: 12.4.0
V8: 7.6.303.31-electron.0
OS: Windows_NT ia32 10.0.17763

It's a really minor thing, but the square looks weird.

Nothing seems to update before restarting visual studio. Maybe add a update button for manually refreshing vue i18n ally ?

0.22.4:

0.22.2:

Reproducible by adding test/fixture/basic/locales/nl.json with any content.

I think the changes in #31 that fixed #30 cause this bug.

Thanks for the awesome extension by the way!

From the tree view, it is possible to edit translations, rename keys and delete keys. But it isn't possible to add new keys from there. It would be great if it was possible to add new keys from the tree view.

Duplicating existing keys here would also be a great feature. As i often see myself duplicating existing keys, like error messages, and slightly changing them.

In the panel above I can see, for instance, that 4 French translations are missing. However I can't know which ones they are and if you consider translation files of some hundreds of lines, it can be hard to find them.

Can we make each of the languages expandable to see the specific missing translations in detail?

esm package would not reload modules properly

https://github.com/antfu/vue-i18n-ally/blob/master/src/parsers/JavascriptParser.ts

Inline annotation & Hover & Direct actions for i18next doesn't seem to be working.

Describe the bug
Missing keys auto-translate got slow. I guess the translate API got throttled. What can I do about that?

Extension Version
1.1.1

Framework/i18n package you are using
React

To Reproduce
Steps to reproduce the behavior:

1. Right click 'Missing translations' on a language ( 900 missing translations)
2. Select Translate

Screenshots

Desktop (please complete the following information):

• Ubuntu 18.04.3 LTS

Always in dir-locales mode. Not sure happened in other mode.

My excepted result:

And the reality is:

I use the test file in the test/fixture/dir-locales.

I will add info later and pull a request. Please see pull #31

I don't know if this is already in there, if so, I can't get it to work.

Given
en.yaml

label:
  a: "this is translated"

And say I use

<p>{{$t('label.b')}}</p>

Now this does obliviously not work.
I would like to click the "pencil" icon and just translate it from the UI and the plugin should create the key if it does not exist, instead of having to create the label.b key first.

In this UI

IF this exist, I can't get it to work

I don't see any errors in the output

And while we are at the feature requests, could you add the Danish flag ? 😆

What framework do you want to have? Please provide links of its i18n solution/package.
Angular

https://angular.io/guide/i18n

Please provide some overall screenshots about how the i18n usage would be like

<h1 i18n="site header|An introduction header for this sample@@introductionHeader">Hello i18n!</h1>

Please provide a minimal starter project
Already included in the examples
https://github.com/antfu/i18n-ally/tree/i18n-ally/examples/angular

Additional context
Things to be done to support angular

• XLFF parser
• BCP47 locale code format, and an option to switch between different format
• Angular frameworks

Vote

This extension is supporting ngx-translate now. I am not an Angular user and I am not sure what's the community favor.

If you would like to see this get supported, please hit 👍 to vote on this. When it's hit 15 👍 I would start to consider implementing this. Thanks!

It does not seem to work for me. I am using the latest Code Insiders.

For some reason the extension wont activate?
Though it is enabled.
Any idea?
Thanks

It would be great if this extension could also add translation keys for angular (@ngx-translate/core) directly from the code view

Thats how the translation key from @ngx-translate/core looks like in a ts file.

{{'key' | translate}}

Hi,

We have keys with hyphen, like : message.the-title.
But the preview doesn't show in the single file component.
It display well in the tree view of the plugin.
No problem with the others keys.

FYI : Our locals files are in json5 and the plugin is in readonly.

In my en.json I have :

"Page":{
    "Dealers": {
      "CleanAccount": "Account",
      "StatusCode": "Status",
      "StoreName": "Store Name",
      "BuyingGroupDescription": "Buying Group",
      "Address": "Address",
      "AddressAdditional": "Address Additional",
      "City": "City",
      "StateDescription": "State/Province",
      "CountryDescription": "Country",
      "ZipCode": "Zip/Postal code",
      "Representative": "Representative"
    }
}

but in my component when I click the edit the translation it creates a new property at the end of my en.json file:

"Page.Dealers.Address":"Address"

Instead of modifying the existing nested one.

Is there something I am missing? Do I have to turn on an option to support the nested properties ?

Other than that, great work on this extension, it makes dealing with translations so much easier :)

What framework do you want to have? Please provide links of its i18n solution/package.
rails-i18n, https://github.com/svenfuchs/rails-i18n

Additional context
https://github.com/svenfuchs/rails-i18n

Vote

If you would like to see this get supported, please hit 👍 to vote on this. When it's hit 15 👍 I would start to consider implementing this. (PR is also welcome!) Thanks!

Hi,
I used your lovely extension on my mac but when i want to configure locale files on other pcs extension doesn't detect locale files
I tried manual locale file configuration

In our case of a sizeable vue app, we have solved the problem of locale messages needed in both the FE and the BE with the use of an npm package (which will also change soon as we bring together the FE, BE and shared libs in a monorepo).

By that definition, our folder/file structure does fail to map with the expected structure of this vscode plugin as our messages are not even in the src folder.

In fact our structure currently looks like this:

shared-libs (could be out of `src` or even inside `node_modules`)
  ├── i18n
  |   ├── messages
  |   |   ├── en.messages.ts
  |   |   ├── de.messages.ts
  |   |   └── ...
  |   └── ...
  └── ...

Acceptance criteria:

1. abstract the expected structure enough to be configurable
2. user can pass a regex that matches the path of each translated locales/messages file

Notes:

• feel free to edit the acceptance criteria as you see fit to best solve the described problem
• this is a really cool plugin, we'd love to be able to use it! :)

I got the following message in the Progress and tree section.
I'm on Mac-os X
Latest version of VsCode
Working on vue-i18n on nuxt.js.

In the output it says it's activated and enabled.

Thanks! Looking forward to using this plugin!

Describe the bug
In the project i'm working on, we are using a flat data structure for the translation files. The tree view shows this as one long list of keys, with only the translations nested under them. It would be great if it could show the dot separated words as nodes in the tree.

Extension Version
i18n Ally v1.3.3

Framework/i18n package you are using
ngx-translate

To Reproduce
I'm assuming you can just open a project with translation files that have a flat data structure.

Screenshots
This is how it looks now:

I would like something more similar to this:

Desktop (please complete the following information):
Windows 10

Does it support colon notation?

How can I get things working when namespace is selected with :

In some use case, we may need to keep comments inside locale files. Although YAML and JSON5 supports comments, but due to the parser limitation, it's not possible to keep comments on dumping. The current workaround is to make this extension in readonly mode when we need to use comments.

This issue is to support JSONC(microsoft/node-jsonc-parser) from vscode to make comments work well.

Relative to #59
Refer to https://github.com/antfu/vue-i18n-ally#comments-in-yamljson5

In our project, we use 4 spaces as indentation size for pretty much all json and ts files. The auto formatter automatically formats these files with 4 spaces. And so does another tool that some people in our project are currently still using. i18n Ally saves the translation json files with 2 spaces of indentation. While this might not always be a problem, merge conflicts seem to occur more often and indicate the entire files as conflicting.
I would love a setting to configure the space indentation size.

The 'package.json' is not in the root path of my project.

Additional context
Error msg:

Error on parsing package.json
⚠ Current workspace is not a valid project, extension disabled

Solution:
Let me set the root path to the angular project.
like:

"i18n-ally.projectRootPath": "folder/folder/folder",

Currently 'array' in locales is not handled well with this extension.

https://kazupon.github.io/vue-i18n/guide/messages.html#structure

Describe the bug
Inline annotation does not work if the t function contains a newline as such:

t(
    "calendars.gregorian..."
);

This is an issue as Prettier formats long keys on new lines.

Extension Version
i18n Ally (v 1.3.3)

Framework/i18n package you are using
react-i18next

To Reproduce
Assuming existing framework, create a looong key, and type the t function as above

Desktop (please complete the following information):

• OS: Win10
• Version 1803

What framework do you want to have? Please provide links of its i18n solution/package.

ember-intl, https://www.npmjs.com/package/ember-intl

Please provide some overall screenshots about how the i18n usage would be like

{{t 'photos.banner' numPhotos=model.photos.length}}

this.intl.t('photos.banner')

I'm running a project where the Vue setup is inside a PHP project and therefore - the package.json file is not in the root of the workspace. VS Code works fine, since it supports scanning recursively for package.json, but this extension says it cannot detect it. So, I'd like to request either a setting, so I can set a custom path for package.json (or let's say a relative custom root would be maybe even better) or make the extension scan for package.json recursively, like VS Code does itself.

Hi, package looks very usefull but when i try with nuxt nothing shows up

Currently the progress bar looks weird on Windows

I am not sure if this problem also exists on macOS and Linux. Screenshots are welcome

It should be a better workaround.

nvm

Edit: 2019-07-29

Experimental support for SFC is landed in v0.29.0, please check out the release note for more details.

https://github.com/antfu/vue-i18n-ally/releases/tag/0.29.0

vue-i18n has a feature allow user to define their locale messages in the i18n section of Single File Components(SFC)

Something like this:

<i18n>
{
  "en": {
    "hello": "helloworld!"
  },
  "ja": {
    "hello": "こんにちは、世界"
  }
}
</i18n>

<template>
  <div class="parent">
    <p>message: {{ $t('hello') }}</p>
  </div>
</template>

Supporting SFC locales need a lot of work to the current code base. And I am not sure if it's a good practice at all. So I opened this issue for make a survey about this feature usages.

If you are using SFC locales and would like to see it supported by this extension. Please upvote this comment 👍

Also, feel free to leave comments to discuss about this topic. Thanks. 😄