はじめに
- 拡張機能を l10n する手順を調べてみた
- VSCode 拡張機能の環境構築とかは省略
- 参考: VSCode 拡張機能作成に入門してみたよ（setDecorations 編）
オフィシャルな参考資料
VSCode のオフィシャルな l10n 説明。英語だけど、ここの説明で大体わかるはず。
l10n の公式サンプル
VSCode の API 仕様
手順
l10n する対象は２つあります。
- ソースコード中のメッセージ
-
package.jsonの中のメッセージ（コマンドタイトルとか、プロパティの説明とか）
ソースコード中のメッセージの l10n
以下の手順で対応すればよさそう。
-
@vscode/l10nのインストール -
@vscode/l10n-devのインストール -
package.jsonにl10nを追加 -
vscode.l10n.t()を呼び出すように修正 -
@vscode/l10n-devを実行して、bundle.l10n.jsonを生成 -
bundle.l10n.ja.json等の各言語版のリソースを作成
@vscode/l10n のインストール
l10n 用のライブラリを普通にインストールするだけ。
npm install @vscode/l10n
@vscode/l10n-dev のインストール
こちらは、実行時には不要なもののようです。
グローバルにインストールするなら、以下のような感じ。
sudo npm install -g @vscode/l10n-dev
開発用にインストールするなら、以下のような感じ。
npm install --save-dev @vscode/l10n-dev
package.json に l10n を追加
各言語のリソースを置く場所を package.json の l10n に指定します。
{
// ...
"l10n": "./l10n",
// ...
}
vscode.l10n.t() を呼び出すように修正
ソースコード中で、英語のメッセージを使っている箇所を、vscode.l10n.t() を使って使用するように修正します。
- 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 を実行して、bundle.l10n.json を生成
以下のように @vscode/l10n-dev コマンドを実行します。
npx @vscode/l10n-dev export --outDir ./l10n ./src
ソースの中から vscode.l10n.t() 等を呼び出している箇所を探して、bundle.l10n.json を作ってくれます。
bundle.l10n.ja.json 等の各言語版のリソースを作成
前述のコマンドで生成された ./l10n/bundle.l10n.json の中身は、以下のようになっているはず。
{
"hello world": "hello world"
}
キーは英語のメッセージがそのまま、値はここでは英語のメッセージが入っているけど、各言語版のメッセージを指定します。
まずは、指定の言語コードをつけてファイルをコピーします。
例えば日本語の言語コードは ja なので、./l10n/bundle.l10n.ja.json になります。
そして、ファイルを修正します。
{
- "hello world": "hello world"
+ "hello world": "こんにちは、世界"
}
ちなみに、動作時には bundle.l10n.json や、英語版リソースの bundle.l10n.en.json は不要なようです。
package.json の中のメッセージの l10n
もう一方の、package.json の中のメッセージの l10n には、特に必要なライブラリなどはないみたい。
package.json 内のメッセージを l10n するには、package.nls.json (英語版)や package.nls.ja.json (日本語版)などのファイルを用意して、そのキーを package.json に記載するようです。
package.nls.json や package.nls.ja.json は、package.json と同じ階層に置けばよいみたい。
{
"myExtension.sayHello": "Hello"
}
{
"myExtension.sayHello": "こんにちは"
}
package.json の中のメッセージを置き換えます。
- "title": "Hello"
+ "title": "%myExtension.message%"
あとは、動作確認をすれば OK！
実際に拡張機能を修正してみた
先日公開した拡張機能を、実際に l10n してみました。