VSCode 拡張機能作成に入門してみたよ（l10n 編）

# はじめに

* 拡張機能を l10n する手順を調べてみた
* VSCode 拡張機能の環境構築とかは省略
* 参考: [VSCode 拡張機能作成に入門してみたよ（setDecorations 編）](https://qiita.com/yoshi389111/items/8dca20680eb79f01cb2c)

## オフィシャルな参考資料

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

https://github.com/microsoft/vscode-l10n

l10n の公式サンプル

https://github.com/microsoft/vscode-extension-samples/tree/main/l10n-sample

VSCode の API 仕様

https://code.visualstudio.com/api/references/vscode-api

## 手順

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

* ソースコード中のメッセージ
* `package.json` の中のメッセージ（コマンドタイトルとか、プロパティの説明とか）

## ソースコード中のメッセージの l10n

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

1. `@vscode/l10n` のインストール
2. `@vscode/l10n-dev` のインストール
3. `package.json` に `l10n` を追加
4. `vscode.l10n.t()` を呼び出すように修正
5. `@vscode/l10n-dev` を実行して、`bundle.l10n.json` を生成
6. `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` に指定します。

```javascript:package.json
{
    // ...
    "l10n": "./l10n",
    // ...
}
```

### `vscode.l10n.t()` を呼び出すように修正

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

```diff: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` を実行して、`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` の中身は、以下のようになっているはず。

```json:bundle.l10n.json
{
    "hello world": "hello world"
}
```

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

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

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

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


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

```json:package.nls.json
{
    "myExtension.sayHello": "Hello"
}
```

```json:package.ja.nls.json
{
    "myExtension.sayHello": "こんにちは"
}
```

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

```diff_json:package.json
-     "title": "Hello"
+     "title": "%myExtension.message%"
```

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

# 実際に拡張機能を修正してみた

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

https://github.com/yoshi389111/vscode-md-table-rainbow

https://github.com/yoshi389111/visible-whitespace