はじめに

オフィシャルな参考資料

VSCode のオフィシャルな l10n 説明。英語だけど、ここの説明で大体わかるはず。

l10n の公式サンプル

VSCode の API 仕様

l10n する対象は２つあります。

以下の手順で対応すればよさそう。

l10n 用のライブラリを普通にインストールするだけ。

npm install @vscode/l10n

こちらは、実行時には不要なもののようです。

グローバルにインストールするなら、以下のような感じ。

sudo npm install -g @vscode/l10n-dev

開発用にインストールするなら、以下のような感じ。

npm install --save-dev @vscode/l10n-dev

各言語のリソースを置く場所を package.json の l10n に指定します。

package.json

{
    // ...
    "l10n": "./l10n",
    // ...
}

ソースコード中で、英語のメッセージを使っている箇所を、vscode.l10n.t() を使って使用するように修正します。

typescript

- vscode.window.showInformationMessage("hello world");
+ vscode.window.showInformationMessage(vscode.l10n.t("hello world"));

文字列を埋め込みたい場合には、以下のような感じになるみたい。

const message = vscode.l10n.t("hello {0}", username);

あるいは、以下のような書き方もできるみたい。

const message = vscode.l10n.t("hello {name}", { name: username });

詳細は API 仕様を確認してください。

以下のように @vscode/l10n-dev コマンドを実行します。

npx @vscode/l10n-dev export --outDir ./l10n ./src

ソースの中から vscode.l10n.t() 等を呼び出している箇所を探して、bundle.l10n.json を作ってくれます。

前述のコマンドで生成された ./l10n/bundle.l10n.json の中身は、以下のようになっているはず。

bundle.l10n.json

{
    "hello world": "hello world"
}

キーは英語のメッセージがそのまま、値はここでは英語のメッセージが入っているけど、各言語版のメッセージを指定します。

まずは、指定の言語コードをつけてファイルをコピーします。
例えば日本語の言語コードは ja なので、./l10n/bundle.l10n.ja.json になります。

そして、ファイルを修正します。

bundle.l10n.ja.json

  {
-     "hello world": "hello world"
+     "hello world": "こんにちは、世界"
  }

ちなみに、動作時には bundle.l10n.json や、英語版リソースの bundle.l10n.en.json は不要なようです。

もう一方の、package.json の中のメッセージの l10n には、特に必要なライブラリなどはないみたい。

package.json 内のメッセージを l10n するには、package.nls.json (英語版)や package.nls.ja.json (日本語版)などのファイルを用意して、そのキーを package.json に記載するようです。

package.nls.json や package.nls.ja.json は、package.json と同じ階層に置けばよいみたい。

package.nls.json

{
    "myExtension.sayHello": "Hello"
}

package.ja.nls.json

{
    "myExtension.sayHello": "こんにちは"
}

package.json の中のメッセージを置き換えます。

package.json

-     "title": "Hello"
+     "title": "%myExtension.message%"

あとは、動作確認をすれば OK！

先日公開した拡張機能を、実際に l10n してみました。