VS Code Extension（拡張機能）の作り方 ／ Copilotさん大活躍の巻！
前回の記事
の裏側のお話。作り方の解説（というか自分用覚え書き）を残しておきます。
参考ページ１：おみくじ機能の作り方
↑まずはコレを真似してみて、拡張機能の作り方をざっと学習。
準備
環境にNode.js をインストールしておく。
(同時にNode.jsのパッケージマネージャ、npmも入る）
yoで雛型を作成するyo！
※yo = Yeoman は、雛型＝テンプレートコードを生成してくれるスキャフォールディングツール
※スキャフォールドってのは「足場」とか言う意味。踏み台みたいなもの。これでゼロからつくらなくてもシステムの土台を自動で作成してくれちゃう便利なやつ。
> npm install -g yo generator-code> yo codeここで雛型作成が開始され、いくつか質問に適当に答える。
とりあえず GUNS TOOL という拡張機能として作成開始。
セレクトできるようになってる
雛型が作成され、
雛型フォルダを開き、
虫＋▷アイコン（Run＆Debug）を押すと現れる「Run Extention」をぽちると
実行テスト用のCodeがもう一枚開き、中で実行されます。
その時、
新たに開いたCodeのエディタ内でコマンドパレット（Ctrl＋Shift＋P）で「HelloWorld」を実行すれば、
となるわけです。やったね ！ ,,Ծ‸Ծ,,ｖ
すごいぞCopilot！
雛型ができたらガリガリと中身を実装していくわけなのですが、正直 TypeScript って経験ないので調べながらだと時間かかるかなあなんておもっていたのです。
んが、VSCodeについてくるアシスタントAI機能、Copilotさんがひっじょうに賢くて、やりたいことをCHATで問いかければ、がんがんその場でコーディングしてくれます。
例えばこんな感じ。
プロンプト＞ 新たにコマンド「GTool:三点リーダ修正」を作成してください。動作内容は、アクティブエディタテキスト文中に「・・・」や「‥」、「…」の1文字以上の連続が現れた場合、「…」の２連続である「……」と置換するコマンドです。
新しいTODOを追加してから、コマンドを実装します。
Created 6 todos
extension.ts
に新しいコマンドを追加します。
Read extension.ts, lines 225 to 245
Read extension.ts, lines 245 to 258
extension.ts
package.json
にコマンドを登録します。
Read package.json, lines 40 to 48
package.json+4-0
README.md
に説明を追加します。
Read README.md, lines 120 to 140
README.md
Completed: Add ellipsis normalization command (6/6)
完了しました — 新しいコマンド「GTool:三点リーダ修正」を追加しました。
実装内容（要約）
guns-tool.fixEllipsis コマンド追加
「・」「‥」「…」など複数形式の三点リーダを統一します。
これらの文字の1文字以上の連続を「……」（U+2026の2連続）に置換。
正規表現：[・‥…]+ で対象の文字の任意の連続にマッチ。
例：漢字・・・漢字 → 漢字……漢字、漢字‥漢字 → 漢字……漢字
package.json にコマンドを登録。
README.md に説明と動作例を追記。
動作確認手順
拡張機能をリロード後、コマンドパレットから「GTool:三点リーダ修正」を実行してください。
テスト例：
漢字・・・漢字 → 漢字……漢字
漢字‥漢字 → 漢字……漢字
漢字…‥・漢字 → 漢字……漢字（複数形式の混在も統一）
これで原稿の三点リーダをすべて統一の形式に整えることができます。てなぐあいにどんどんコードを作って、さらにREADMEまで修正してくれちゃう。私は都度聞いてくる Apply だの Allow だの許可っぽいボタンをポチポチしたり、コード変更提案を Keep するか Undo するか選ぶだけの簡単なお仕事。やばいっす。楽すぎるｗ
（あ、最初に「今後のやり取りは日本語で」というプロンプトは必須ですねｗ）
実際これ作りはじめて公開まで1日かかってないです。当然夜は寝ていたし、昼間は本読んだりうだうだしたり（仕事しろｗ）していたので実質作業時間は３時間ぐらいじゃないかなー？
（一番時間かかったのはアイコン作成な気がしますｗ）
その証拠、↑で作業のActivityが見れます。コミットしたタイミングが時系列に並んでいるので、それぞれの時間を見てみたらわかりますね。
初めてVSCodeの拡張機能を作り始めてこんな短時間でこんだけの作業ができちゃうってこと。すごいねえ。ま、すごいのはCopilotさんなんですけどねｗ
参考ページ２
なお、VSCode拡張機能の作り方については ↑こちらのほうがより細かい内容まで書いてあるので、しっかり読んでおくと吉。
マーケットプレイスで公開するにはここの情報が必須でした＞＜
マーケットプレイスで公開までの長き道のり
さて、せっかく作ったので、試しにマーケットプレイスで公開してみようかと思いたったのですが、これが結構大変（特にMicrosoftアカウント関係）でした。
ただ、それもCopilotさんに質問しながらなんとかクリヤ。
まず、
vsceのインストール
> npm install -g @vscode/vscevsce（Visual Studio Code Extensions）は、VSCode拡張機能のパッケージング、公開、管理を行うための公式コマンドラインツールとのこと。
> vsce package↑で拡張機能（.vsix）ファイルのパッケージングができます。
できたパッケージ、拡張機能（.vsix）ファイルは、VSCode上から、拡張機能ー＞「…」ー＞「拡張機能（VSIX）からインストール」でインストールできます。まあ、マーケットプレイスで公開しないならこの方法で大丈夫。
マーケットプレイスで公開するとするなら、
マーケットプレイス公開手順
Azure DevOpsアカウントを作成
パーソナル・アクセス・トークン（PAT)を取得
パブリッシャーの作成
パブリッシャーログイン
ファイルをそろえて公開
という手順になります、やってみてようやくこの１～３の順番がわかりましたが最初は混乱しがちで、Azure DevOpsアカウントってAzureアカウントとちがうの？ AzureアカウントとMicrosoftアカウントの関係は？ とか、アカウントIDとパブリッシャーIDってちゃうの？ などなど謎が膨らみいったりきたり。そのIDちゃうよと怒られたりロックされたりで大変でした＞＜
とりあえず、↑の順番どおりにやっていけばなんとかなった模様（おかげでゾンビ化したIDがいくつか……）
手順覚え書き
パーソナル・アクセス・トークン（PAT)はAzure DevOpsアカウント対象に取得でき、Azure DevOpsアカウントのIDからパブリッシャーを作成、パブリッシャーIDでログインして、パスワードの替わりにPATを入力する……らしい？ ほんと？
わたしの場合、KAGURAZAKARASENというIDでAzure DevOpsアカウントを作成し、そのIDでPATを取得、で、パブリッシャー設定をして、そのパブリッシャーIDでログイン、する時にAzure DevOpsアカウントで取得したPATを入力……という形。いいの？ これで？
vsceでlogin
なーんだか腑に落ちないけれど、これでまあログインできてるみたいだからヨシとしましょう。
このとき必要なファイルは先ほどの参考ページ２を参考に、手順は
↑このページを参考になんとかやっつけた感じです。
パブリッシュ！
> vsce publish必要なファイルが問題なくそろっていて、package.json指定の適切な場所にちゃんと入っていれば、これでパブリッシュしてくれるはず。
Extension URLも出ていますが、すぐには公開されない様子。Hub URLを開けてみるとベリファイ状態でした。問題なければ数分で公開されるようです。
ひとまずなんとかなってよかったよかった。
まとめ
これ、ひとりだったら「やっとられんわうきゃー！」って投げ出していたと思います。が、その都度Copilotさんに質問をなげながらできたので躓かずにすんだかんじですねー。
ＡＩさんとペアプログラミング♡ これが流行りの Vibe Coding（バイブコーディング）ってヤツなのでしょうか。
素人質問（恐縮ですが！）や疑問に正しく答えてくれるだけでなく、適切に手助けをしてくれて、その上面倒なことも面倒くさがらずに勝手にやってくれちゃう頼もしさ。キュンときちゃいますねｗ
もうCopilotさん手放せませんわ。というか彼無しじゃいられないこのかんじヤバくない？ｗ コレは課金まったなしかなあ。（いまのところまだ無料で使えています）
どうしようかなあ。困った困ったｗ
とはいえ、そんな愛しきCopilotさんもVSCodeさんも、かのMicrosoft家の御子なので、課金には躊躇してしまうわたくしなのです。
なんせMicrosoftアカウント関連は鬼門ですからねぇ。
今回だってやたらアカウント沢山作らされるしいちいち属するドメイン情報なんかを正確に入力せよとか言うくせにこんな質問でてくるしねｗ
このあたりも適切に助言してくれたりアカウントやパスワード管理とかまでしてくれる個人アシスタント的なＡＩさんの出現が待たれる今日この頃なのでありました。
あ、あとあと、こんな具合に小説書きをアシストしてくれるCopilotさん切実に希望ですｗ
そんなのが現れたら人間作家マジでいらなくなっちゃうけどｗ
いいなと思ったら応援しよう！
よろしければサポートお願いします！いただいたサポートはクリエイターとしての活動費にさせていただきます！感謝！,,Ծ‸Ծ,,