What is the specific reference of the first parameter in NLS localize?

Question

What is the specific reference of the first parameter in NLS localize?

Regarding the question on localizing VSCode extensions, I am also curious why the localize function requires two parameters.

When it comes to localizing settings, it's a simple process of replacing literal values with tokens surrounded by percent signs, which are then replaced using a dictionary from a file based on the current locale.

However, the localize function demands at least two parameters - a key and a message. It can also accept an unspecified number of subsequent parameters of any type, referred to as "args."

The lack of documentation on this topic is quite noticeable.

Initially, the sample code won't even compile until you update the package.json to require a minimum vscode version of 1.34 instead of 1.32 in order to accommodate updates to the TS typing files. Once this modification is made, the sample compiles and launches, but does not appear to work as expected (the activate function does not run; I am still investigating this issue).

The sample includes a call to localize with the key "sayHello.text," but I couldn't find a corresponding string in the localization resources. The use of arbitrary args suggests dynamic composition at runtime, although this is not demonstrated in the sample code. Due to the lack of documentation, it's difficult to understand the functionality fully.

Can anyone provide insight into the parameters?

After examining the vscode-nls repository, I came across the following code snippet.

export function localize(_key: string | LocalizeInfo, message: string, ...args: any[]): string {
    return format(message, args);
}

Despite the appearance that it does not utilize _key, there is a localizeFunc with a similar signature that does make use of it. I suspect a configuration function call may be manipulating names behind the scenes.

typescript localization vscode-extensions

Answer 1

Answer №1

The configuration function works its magic in mysterious ways. It's a prime example of the distinction between clever and intelligent. This function adds an extra layer of satisfaction to working with webpack.

Let's say you want to add support for French.

In the i18n directory of your project, create a folder named fra. Just three letters, following the standard for three-letter country codes. A quick search engine query will guide you.

You're probably already aware that you need to create a package.i18n.json file inside this folder, containing key-value pairs like this:

{
    "extension.sayHello.title": "Bonjour",
    "extension.sayBye.title": "Au revoir"
}

The values in this file will be used to replace the corresponding placeholders in the package.json values, enclosed in percent signs.

If you create an out directory next to the package.i18n.json file, and add an extension.i18n.json file inside the out directory with the following content:

{
    "sayHello.text": "Bonjour from extension.i18n.json"
}

the key to use for localization is "sayHello.text". The second parameter acts as a fallback if a matching key is not found for the current display language.

Before this setup can function correctly, you need to complete three additional steps.

Update the gulpfile.js to include the languages you want to support.

const languages = [
 { folderName: 'jpn', id: 'ja' },
 { folderName: 'fra', id: 'fr' }
];

Install Gulp and run the gulp build command.
Change your display language to French.

By calling

localize("sayHello.text", "default value")

, you will receive "Bonjour from extension.i18n.json" when using French as the display language and "default value" for other languages.

The optional arguments supposedly allow for placeholder replacement in the return value, but documentation on this feature is lacking, and its usage is rare.

Note: If you have imports of classes nested in folders, the folder structure of the localization dictionaries must match. Adjustments may be necessary if you are not building into an out directory.

For a basic example provided by Microsoft, check out this minimal worked example. While it lacks detailed explanations, you can use this answer as a guide to understand the sample better.

Answer 2

The configuration function works its magic in mysterious ways. It's a prime example of the distinction between clever and intelligent. This function adds an extra layer of satisfaction to working with webpack.

Let's say you want to add support for French.

In the i18n directory of your project, create a folder named fra. Just three letters, following the standard for three-letter country codes. A quick search engine query will guide you.

You're probably already aware that you need to create a package.i18n.json file inside this folder, containing key-value pairs like this:

{
    "extension.sayHello.title": "Bonjour",
    "extension.sayBye.title": "Au revoir"
}

The values in this file will be used to replace the corresponding placeholders in the package.json values, enclosed in percent signs.

If you create an out directory next to the package.i18n.json file, and add an extension.i18n.json file inside the out directory with the following content:

{
    "sayHello.text": "Bonjour from extension.i18n.json"
}

the key to use for localization is "sayHello.text". The second parameter acts as a fallback if a matching key is not found for the current display language.

Before this setup can function correctly, you need to complete three additional steps.

Update the gulpfile.js to include the languages you want to support.

const languages = [
 { folderName: 'jpn', id: 'ja' },
 { folderName: 'fra', id: 'fr' }
];

Install Gulp and run the gulp build command.
Change your display language to French.

By calling

localize("sayHello.text", "default value")

, you will receive "Bonjour from extension.i18n.json" when using French as the display language and "default value" for other languages.

The optional arguments supposedly allow for placeholder replacement in the return value, but documentation on this feature is lacking, and its usage is rare.

Note: If you have imports of classes nested in folders, the folder structure of the localization dictionaries must match. Adjustments may be necessary if you are not building into an out directory.

For a basic example provided by Microsoft, check out this minimal worked example. While it lacks detailed explanations, you can use this answer as a guide to understand the sample better.

What is the specific reference of the first parameter in NLS localize?

Answer №1

Similar questions

Retrieve the value of a property with a generic type

Utilizing conditional types for type narrowing within a function's body: A comprehensive guide

custom field component for react-hook-form

Create a function that takes advantage of a Promise to resolve its actions

What is the implication when Typescript indicates that there is no overlap between the types 'a' and 'b'?

What TypeScript syntax is similar to Java's "? extends MyClass" when using generics?

Guide on integrating external libraries with Angular CLI

Tips for selecting objects based on property in Typescript?

Issue with Bot framework (v4) where prompting choice in carousel using HeroCards does not progress to the next step

Transforming FormData string key names into a Json Object that is easily accessible

Deeply nested .map function to update state value

Strategies for passing multiple props to a function in React using TypeScript, such as useState([]) and useState(boolean)

Implementing a NextJS client component within a webpage

Sending data to a parent component from a popup window in Angular Material using a button click while the window is still open

Incorporating TypeScript's internal references

Unused Default Resource.resx file detected

I can't find my unit test in the Test Explorer

Reactive form allows you to easily format dates

How can the values from the scale [-60, -30, -10, 0, 3, 6, 10] be converted to a decimal range of 0-1 through

How to modify the background color within the mat-menu-panel