alexpkent/ngx-translate-lookup

vscode extension to display strings, autocomplete and find missing strings on html pages using ngx-translate

ngx-translate-lookup

Using ngx-translate your html will have references to keys being passed through the translate service. It can be hard to know what these translate to and if there are any missing strings until runtime.

Features

This extension will read a .resx or .json file and then provide intellisense and code completion displaying available keys and values. It will also provide problem reporting of values that do not exist in the resources file.

Code Completion

Missing value warnings

Hover information

Reload

If the config is changed or the resource dictionary is modified the extension can be reloaded with the 'ngx-translate-lookup.reload' command found in the command menu as 'Reload ngx-translate-lookup dictionary'

Extension Settings

This extension contributes the following settings:

• 'ngx-translate.lookup.resourcesType': Type of resource file, either .resx or .json.

  • If json then the format should be:

  {
    "STRING1" : "This is the first",
    "STRING2" : "This is the second"
  }
  

  • or you can mix with nested json:

  {
    "STRING1" : "This is the first",
    "STRING2" : "This is the second",
    "foo": {
      "bar": {
        "word1": "translated1",
        "word2": "translated2"
      }
    }
  }
  

  Which on selection will result in 'foo.bar.word1' as the value to be translated.

  Provide either a single path or array of paths to resource files.

• ngx-translate.lookup.resourcesPath: Path to a resources file (.resx or.json) file for lookups.

• ngx-translate.lookup.resourcesPaths: Array of path to resources file (.resx or.json) file for lookups.

  Paths can either be a full path ('C:\\resources.resx') or a relative path ('..\\..\\resources.resx').

  If relative then the setting should be in Workspace settings and will be relative from the first workspace folder opened.

• ngx-translate.lookup.regex: Regular expressions used to locate translation string/keys within documents. These default to find usages of 'translate="KEY"' and '{{'KEY' | translate}}'

ngx-translate-lookup's Issues

Could your extension support typescript lang files?

Currently where I work we use *.ts files for translations,
it would be awesome if I could use this extension with those type of files.

Is this hard to do? (I am not super experienced in extension development, but I could maybe create a pull request)
As much I have checked now is that export function loadResource( func needs to be extended with another if.

Could this be used?
https://www.npmjs.com/package/ts-file-parser

Output always opens

It seems every time the plugin will initialise it will open the "output" pane.
This seems to be on any project

This means it has to be closed every time, I do not see an option for it either?

default regex seems to be broken. why is it still partially working for me?

Awesome plugin idea!

currently
{{\\s?'([A-Za-z0-9_\\.]+)'\\s?|\\s?translate_}}

how it should be
{{\\s?'([A-Za-z0-9_\\.]+)'\\s?\\|\\s?translate\s?}}

question:

why is there _ in the end of the regex? Why is the pipe not escaped. It has a special meaning in regex.

somehow the plugin is not working for me with other regexes. I can provide examples if needed.

Support for params?

Hi! The diagnostics for when a key is not found in the language file, as well as intellisense are super useful, thank you!
However parameters seem not to be supported - nor do the aforementioned features work with them, which is a bummer.

en.json:
{
"Hello": "Greetings!!!"
"HelloWithName": "Greetings {user}!!!"
}

while this works:
{{'Hello' | translate} }}

This does not:
{{'HelloWithName' | translate: {user: customer.surname} }}

In the last example, when I change the key to something non existent, the intellisense warning won't appear. I reckon one can easily extend the regex in the settings. However I think a standard implementation would be good. Also in my settings, the line, defining regex is actually missing, so I'm not sure how I would extend, without breaking.

Also, I'd love to see diagnostic warnings for wrong parameter names, like if 'user' in the example above '{user: customer.surname }' was not existing in the json.

Unclear how choose 'ngx-translate.lookup.resourcesPath'

I don't understand what can I type for relative path for 'ngx-translate.lookup.resourcesPath'?

structure of my project:
Project folder( with package.json)/src/app/assets/i18n/en_US.json
(src, app - standart structure of angular project)

Feature Request: Multiple resourcesPath

It would be great to have ability to get translations from the few files.
resourcesPath -> resourcesPaths: string[]

For example:
lazy loading of translations for different modules
server-side translations

Let me know if the contribution is allowed

Support for typescript files when using `TranslateService`

Hi,

First of all, thank you for this great extension.

We have several calls to TranslateService.get('resourcekey') in our ts files, where we would really love to benefit from this extension. I've tried to add the following regex (making use of our usual naming convention):

"[Tt]ranslateService\\.get\\('([A-Za-z0-9_\\.]+)'\\)"

But it did not work. After I've checked in your source code and as far as I could see, currently only html files are tracked by this extension.

Would you have any concerns about supported ts files as well? Thank you in advance.

Nested JSON keys wanted

Hi! Great extension! But we need a lookup over nested JSON translations. Will it be supported?

False warning "Missing resource string: 'undefined'"

There seem to be a bug when ngx-translate is used as pipe inside the interpolation syntax {{...}}: if the closing curly braces contain 1 space after the end of 'translate', a squiggle appears saying Missing resource string: 'undefined', see screenshot below:

NB: if 0, 2, or more blank spaces are present, no squiggles are shown.