sh1’s diary

プログラミング、読んだ本、資格試験、ゲームとか私を記録するところ

Visual Studio Code の Extension の作り方まとめ(ローカライズと公開)

ゴールデンウィーク前に VisualStudioCode の Extension 作成を開始して、ぎりぎり公開することができました。

f:id:shikaku_sh:20190509184211p:plain:w400
Market からもダウンロードできます!

基本的な作り方をまとめておきます。箇条書きにすると次のようになりました。

  1. Visual Studio Code のインストール
  2. Node.js のインストール
  3. Microsoft のチュートリアル Your First Extension を確認する
  4. yo code で雛形を作成する
  5. 言語化ローカライズ)対応
  6. GitHub に公開する
  7. 完成した Extension の公開

開発環境を用意して(1,2)、チュートリアルを確認して(3)、開発プロジェクトの雛形を作成して(4)、多言語化対応(ローカライズ)を施して(5)、ソースコードを公開する(6)。ここが一息つくポイントかな、と思います。
で、拡張機能を完成させたら公開する(7)という流れです。

情報収集に苦労するのが、多言語化対応(ローカライズ)のあたりだと思います。すでに、いくつか日本語の記事も存在していますが、あまり参考にしないほうがよいと思う記事 1 が検索上位にきていました。

他の方からも同記事に(すこし鼻息の荒い)注意喚起の記事があがっています。

最後の Extension の公開は Personal Access Token を取得する画面が新しくなっているため、いくつか挙がっている参考記事の画像と一致しなかったりしています。
なので、多言語化対応と Extension の公開についてのやり方を主に記録する記事にしたいと思います。

TypeScript に関しては、今回はじめて書いたので、そのあたりはあまり参考になりません。ご了承ください。

言語化ローカライズ)対応1(./package.json

言語化ローカライズ)対応に関して新しく必要なファイルは、次のとおり2つだけです。かんたん。 2

  1. ./package.nls.json ファイルの作成(デフォルト)
  2. ./package.nlsja.json ファイルの作成(日本語対応の例)

./package.json ファイルの多言語化対応だけを考えるなら、上記のファイルをプロジェクトに追加するだけで、多言語化ローカライズ)対応できます。なので、多言語化対応は、ここからスタートするのがベストプラクティスだと思います。

具体的なやり方に進みます。たとえば、./package.nls.json ファイル(デフォルトの言語)の内容がこんな感じだとします。

{
    "cmd.replace-text.title": "Replace selection text",
    "cmd.show-config.title": "Open json file"
}

対応したい言語にあわせてテキストを書き換えてあげます。./package.nlsja.json は日本語対応です。例えば、こんな感じ。

{
    "cmd.replace-text.title": "選択テキストの置換",
    "cmd.show-config.title": "json ファイルを開く"
}

これを ./package.json に適用するときはこんな感じ。%....% で括られる文字列をキーとしてテキストの置き換えがされます。かんたん。

{
    ...
    "commands": [
        {
            "command": "extension.replaceText",
            "title": "%cmd.replace-text.title%"
        },
        {
            "command": "extension.openConfigFile",
            "title": "%cmd.show-config.title%"
        }
    ]
}

./package.json ファイルのローカライズに対応している部分は、有名な extension の例などを参考にするとよいと思います。(私は、Code Settings Sync の package.json なんかを参考にしました)

言語化ローカライズ)対応2(ts ファイル)

コーディング部になる ./src/***.ts ファイルでローカライズするときがすこし面倒になります。./package.nls.json ファイルの情報を自分で直接取得するか、多言語化対応をサポートするパッケージをインストールすることになります。
ほとんどの場合は、自分で直接取得する方法を選んで問題ないと思います。Extension 開発の理解もすすむので、初回はこの方法がベターなプラクティスだと私は思っています。具体的なやりかたの一例は下記。

こんな感じのローカライズを担当するファイルをひとつ作っておけばいいと思います。あとはこのファイルを import してあげれば export した locateText でほしい値を取得します。

import { localeText } from './lang/localization';
...
console.log(localeString("cmd.replace-text.title"));
console.log(localeString("cmd.show-config.title"));

ただし、このやりかただと、初期設定のコンパイラーオプションにひっかかるので、./tsconfig.json の内容に以下を追加します。具体的な意味は TypeScript のドキュメントなどを参照。

{
    "compilerOptions": {
        ...
        "resolveJsonModule": true,
        "esModuleInterop": true
        // "strictNullChecks": false
    },
    "exclude": [
        ...
    ]
}

それから ./package.json の以下を修正しました。やらなくても、できるのかもしれませんが、コンパイラーの出力先が希望する形をずれて out に出力されていたら(いたので)、希望する形に修正しました。

"main": "./out/src/extension.js"

完成した Extension の公開

Extension の公開は次のとおりです。

  1. GitHub への公開(推奨)
  2. vsce のパッケージインストール
  3. Personal Access Token 取得
  4. vsce で Publisher の設定
  5. Publish

このながれはすでに Qiita の記事でまとめられています。よんだほうがよくわかります。ただ、Personal Access Token の生成の画像は 2019 年 4月時点では下記に変更されています。すこし設定の見た目が違うので注意。この設定を間違えるとうまく publish することができません。(権限設定の失敗のため)

f:id:shikaku_sh:20190509182227p:plain:w400
token の作成

うまく publish できたら、あとは待つだけです。Visual Studio Marketplace のページが用意されたのはだいたい一時間後くらいでした。Visual Studio Code で直接 MarketPlace から検索できるようになるには、もう少し時間がかかって、3日後くらいで検索にかかるのを確認しています。が、もう少しはやいのかもしれません。ゴールデンウィーク中だったので、確認できませんでした。
全体的にみると Git の理解が必要だったり、TypeScript の理解、Visual Studio Code の Extension の作り方の土台には、いくつか必要な理解があります。これらに熟れると「便利」になるんだけど、技術習得の先行投資が必要です。それが「壁」の姿であらわれてしまわないようにするのが肝要と思った次第。

はじめてのVisual Studio Code (I・O BOOKS)

はじめてのVisual Studio Code (I・O BOOKS)


  1. この記事は、ローカライズに必要な要件という章を設けていますが、実際は非常に冗長な設定をしている+本質的とはいいづらいため(私は)参考にしないほうがよいと考えています。

  2. Qiita - Visual Studio Code 拡張のローカライズ対応方法 にまとめられています。