VS Code拡張機能のソースファイルに対してl10nを利用して多言語対応をする – 【VS Code】

VS Code拡張機能のソースファイルに対してl10nを利用して多言語対応をする – 【VS Code】

VS Code拡張機能の多言語対応（ローカライズ）は2種類あります。

• コマンドパレットなどpackage.json関連の多言語対応
• VS Code拡張機能のソースコード内のメッセージ多言語対応

コマンドパレットなどpackage.json関連の多言語対応についてはコチラ参照ください。

ここでは、VS Code拡張機能のソースコード内のメッセージ多言語対応を実装してみます。

前提

• TypeScriptで開発
• npm,node.js,yo,generator-codeなどインストール済み（npm install -g yo generator-code）
• yo codeで作成済み

依存関係

l10nを使う為に以下インストールします。

npm i @vscode/l10n
npm i -D @vscode/l10n-dev

extension.ts修正

ソースを多言語修正するためにextension.tsの一部を修正します。vscode.l10n.t()を使うように修正します。

	const disposable = vscode.commands.registerCommand('sampleext.helloWorld', () => {
		// The code you place here will be executed every time your command is executed
		// Display a message box to the user
		// vscode.window.showInformationMessage('Hello World from SampleExt!'); // コメントアウト
		vscode.window.showInformationMessage(vscode.l10n.t('Hello Japan!')); // 追記
	});

l10n作成

package.jsonに以下1行追加します。

package.json

{
  "name": "xxx",
  "l10n": "./l10n" // 手動で1行追加

次に以下コマンドを実行してプロジェクト直下にl10nフォルダとbundle.l10n.jsonファイルを生成します。

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

bundle.l10n.jsonが生成されます。

bundle.l10n.json

{
  "Hello Japan!": "Hello Japan!"
}

bundle.l10n.jsonからbundle.l10n.ja.jsonを作成し、内容を以下のようにします。

bundle.l10n.ja.json

{
  "Hello Japan!": "こんにちは日本"
}

テスト

テストする前に、ctrl + shift + pで「>configure display language」と入力し、「日本語(ja)」を選択します。VS Codeを再起動します。

F5を押してデバッグし、新たに起動するVS Code上でctrl + shift + pで「>Hello World」と入力すると右下に日本語が表示されることが確認できます。

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^