Localization of Webviews in Visual Studio Code Extensions

In the previous post, I showed how to localize the extension commands/settings and code. In this post, I want to show how to localize the webviews in Visual Studio Code extensions, as this is a bit more complicated and not yet documented.

First, webviews allow you to create fully customizable views for your extensions. I like to use them for Front Matter CMS to display the content/media/… dashboards. The webviews are created with HTML, CSS, and JavaScript. Developing webviews is like web application development running within Visual Studio Code.

To localize these webviews, we can use the @vscode/l10n dependency.

In this article, I will tell you more about how you can get started with localizing your webviews in Visual Studio Code extensions.

Assumptions for your webviews

The contents of this article are written for more advanced webviews where you will use frameworks/libraries like React, Vue, … to render your views.

If you are using the static HTML approach as shown in the documentation sample, you can rely on the vscode.l10n.t() function to localize your strings.

When you are using a framework/library, you will need to do some extra work to get the localization working in your webviews, and this is what I will explain in this article.

Prerequisites

First of all, follow the steps that were mentioned in the “localizing the strings used in your source files” section of the previous localization article. You must ensure you have configured the l10n property in your package.json file.

1
{
2
  "l10n": "./l10n"
3
}

Next, we will use the @vscode/l10n dependency. This dependency is used internally by the vscode.l10n.t() function, but this function is not available in the webview context.

To get started, you will need to install the dependency:

1
npm install @vscode/l10n

Localizing your webview

Once the @vscode/l10n dependency is installed, you can localize your webview’s strings.

Open one of your webview files and import the @vscode/l10n dependency:

1
import * as l10n from '@vscode/l10n'

Next, you must update all your hardcoded strings with the l10n.t() function.

Example:

1
<div className='app'>
2
  <h1>{l10n.t("Hello from the React Webview Starter")}</h1>
3

4
  <div className='app__actions'>
5
    <button onClick={sendMessage}>
6
      {l10n.t("Send message to extension")}
7
    </button>
8

9
    <button onClick={requestData}>
10
      {l10n.t("Get data from extension")}
11
    </button>
12

13
    <button onClick={requestWithErrorData}>
14
      {l10n.t("Get data from extension with error")}
15
    </button>
16
  </div>
17

18
  {message && <p><strong>{l10n.t("Message from the extension")}</strong>: {message}</p>}
19

20
  {error && <p className='app__error'><strong>{l10n.t("ERROR")}</strong>: {error}</p>}
21
</div>

Once all these hardcoded strings are replaced, you can start using the @vscode/l10n-dev CLI tool to export all your strings to the bundle.l10n.json file. You can do this by running the following command:

1
npx @vscode/l10n-dev export -o ./l10n ./src

In my case, when I run the tool, I get the following output:

1
{
2
  "Hello from the extension!": "Hello from the extension!",
3
  "Oops, something went wrong!": "Oops, something went wrong!",
4
  "Received data from the webview {0}": "Received data from the webview {0}",
5
  "Your extension got activated with the {0} language!": "Your extension got activated with the {0} language!",
6
  "Hello from the React Webview Starter": "Hello from the React Webview Starter",
7
  "React Webview": "React Webview",
8
  "Send message to extension": "Send message to extension",
9
  "Get data from extension": "Get data from extension",
10
  "Get data from extension with error": "Get data from extension with error",
11
  "Message from the extension": "Message from the extension",
12
  "ERROR": "ERROR"
13
}

I translated all the strings to the pseudo-language locale pqs-ploc for this example. The contents of my bundle.l10n.qps-ploc.json file look like this:

1
{
2
  "Hello from the extension!": "ₕₑₗₗₒ 𝒻ᵣₒₘ ₜₕₑ ₑₓₜₑₙₛᵢₒₙ!",
3
  "Oops, something went wrong!": "ₒₒₚₛ, ₛₒₘₑₜₕᵢₙ𝓰 𝓌ₑₙₜ 𝓌ᵣₒₙ𝓰!",
4
  "Received data from the webview {0}": "ᵣₑ𝒸ₑᵢᵥₑ𝒹 𝒹ₐₜₐ 𝒻ᵣₒₘ ₜₕₑ 𝓌ₑᵦᵥᵢₑ𝓌 {0}",
5
  "Your extension got activated with the {0} language!": "Yₒᵤᵣ ₑₓₜₑₙₛᵢₒₙ 𝓰ₒₜ ₐ𝒸ₜᵢᵥₐₜₑ𝒹 𝓌ᵢₜₕ ₜₕₑ {0} ₗₐₙ𝓰ᵤₐ𝓰ₑ!",
6
  "React Webview": "ᴿᵉᵃᶜᵗ ᵂᵉᵇᵛᶦᵉʷ",
7
  "Hello from the React Webview Starter": "ₕₑₗₗₒ 𝒻ᵣₒₘ ₜₕₑ ᵣₑₐ𝒸ₜ Wₑᵦᵥᵢₑ𝓌 ₛₜₐᵣₜₑᵣ",
8
  "Send message to extension": "ˢᵉⁿᵈ ᵐᵉˢˢᵃᵍᵉ ᵗᵒ ᵉˣᵗᵉⁿˢᶦᵒⁿ",
9
  "Get data from extension": "ᴳᵉᵗ ᵈᵃᵗᵃ ᶠʳᵒᵐ ᵉˣᵗᵉⁿˢᶦᵒⁿ",
10
  "Get data from extension with error": "ᴳᵉᵗ ᵈᵃᵗᵃ ᶠʳᵒᵐ ᵉˣᵗᵉⁿˢᶦᵒⁿ ʷᶦᵗʰ ᵉʳʳᵒʳ",
11
  "Message from the extension": "ᴹᵉˢˢᵃᵍᵉ ᶠʳᵒᵐ ᵗʰᵉ ᵉˣᵗᵉⁿˢᶦᵒⁿ",
12
  "ERROR": "ᴱᴿᴿᴼᴿ"
13
}

Once the strings have been translated, you must implement some logic to get this correctly loaded in your webview. Unfortunately, the @vscode/l10n dependency will not automatically retrieve the localized strings for you in your subprocesses like the webview.

Retrieve the localization strings for the webview

To stay as close as possible to the logic of how Visual Studio Code handles the localization in extensions, I came up with the following solution.

1. From the webview, request the localization strings from the extension host via a postMessage call;
2. The extension host listens for this message and returns the localized strings;
3. The webview receives the localized strings and registers them with the @vscode/l10n dependency.

To simplify the postMessage calls, I will use my @estruyf/vscode dependency as it provides a messageHandler which allows you to async/await these calls.

Extension host listener for the webview messages

The code for your extension host webview listener looks like this:

1
panel.webview.onDidReceiveMessage(
2
  (message) => {
3
    const { command, requestId, payload } = message;
4

5
    if (command === "GET_LOCALIZATION") {
6
      // Check if a l10n path is configured, if not, we will use the default language
7
      if (vscode.l10n.uri?.fsPath) {
8
        readFile(vscode.l10n.uri?.fsPath, "utf-8").then((fileContent) => {
9
          panel.webview.postMessage({
10
            command,
11
            requestId, // The requestId is used to identify the response
12
            payload: fileContent,
13
          } as MessageHandlerData<string>);
14
        });
15
      } else {
16
        // No localization file means we should use the default language
17
        panel.webview.postMessage({
18
          command,
19
          requestId, // The requestId is used to identify the response
20
          payload: undefined,
21
        } as MessageHandlerData<undefined>);
22
      }
23
    }
24
  },
25
  undefined,
26
  context.subscriptions
27
);

Webview message handler

On the webview side, you will need to implement the following message handler:

1
const [ready, setIsReady] = React.useState<boolean>(false);
2

3
React.useEffect(() => {
4
  messageHandler.request<string | undefined>('GET_LOCALIZATION')
5
    .then((fileContents) => {
6
      if (fileContents) {
7
        l10n.config({
8
          contents: fileContents
9
        })
10

11
        setIsReady(true);
12
      }
13
    }).catch((err) => {
14
      // On error, we can still continue with the default language
15
      setIsReady(true);
16
    });
17
}, []);

Results

Once you have implemented the logic, you should be able to see the following results:

Default language

Show image

Localized webview (using the pseudo-language)

Show image