こんにちは。GMOアドマーケティングのK.Mです。
最近めっきりVSCode上で過ごすことが多くなりました。
というわけで、今回はVSCodeの拡張の作り方について調べてみました。
もともと便利な拡張がたくさんあるVSCodeですが、自分の作業に特化したかゆいところに手が届くものを自作できるようになることのメリットも大きそうです。
手始めに、エディタの拡張と考えると良い題材かと思われる選択範囲の文字列を見やすく整形して置き換える機能を作成してみたいと思います。
Beautify系の拡張はたくさんありますが、プロジェクト特化なログ文字列とかをサクッと整形したいようなケースで役に立つことを想定します。
プロジェクト準備
ジェネレーターが用意されているため、それを使ってプロジェクトの雛形を生成します。
|
1 2 |
npm install yo generator-code --save-dev npx yo code |
実装
主には、package.jsonでマニフェストを定義して、src/extension.tsで具体的コードを書いていきます。
APIリファレンスを参照しながら、欲しい機能を実装していきます。
エディタのAPIですね… なんだか新鮮で… こんなのが取れたりするのかと面白いです。
重要なポイントとして、Activation EventsやContribution Pointsを参照しながら、拡張がアクティベートされ機能提供される条件等を指定していきます。
コマンドパレットからコマンド実行したときに有効化したいならonCommand、無条件に（VSCode起動時に）有効化なら*、特定の言語モードの時のみならonLanguageなどがあります。
さて、今回作るものは選択範囲の文字列を見やすく整形して置き換える機能ですので、実装は次の要領で考えます。
– コマンドパレットから実行できるようにする
– 選択範囲の文字列を取得する
– 当該文字列を見やすく整形する
– 選択範囲の文字列を置き換える形で出力する
イメージを掴むためかなりミニマムな感じですが、実装することができました。なお、サンプルコードもたくさん用意されているので参考にすることもできました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
import * as vscode from 'vscode'; export function activate(context: vscode.ExtensionContext) { const disposable = vscode.commands.registerCommand('sample1.formatOriginalLog', () => { const editor = vscode.window.activeTextEditor; if (editor) { const document = editor.document; const selection = editor.selection; const text = document.getText(selection); if (text) { const textFormatted = formatOriginalLog(text); if (textFormatted) { editor.edit(editBuilder => { editBuilder.replace(selection, textFormatted); }); } else { console.log("text not formatted."); } } else { console.log("text not detected."); } } }); context.subscriptions.push(disposable); } // 独自ログ文字列を見やすく整形する例 function formatOriginalLog(text: string): string { let textFormatted = ''; const articles = text.split('|'); if (articles.length > 1) { articles.forEach(article => { const fields = article.split(':'); if (fields.length > 1) { fields.forEach(field => { textFormatted += `${field}\n`; }); textFormatted += `\n`; } }); } return textFormatted; } |
パッケージング
実装ができたら、パッケージングをします。
世に出てる多くの拡張のようにマーケットプレイスへ公開する方法もありますが、単純に手元でパッケージファイルを書き出してインストールすることもできます。
パッケージファイルをチームメンバーに配ってチームで活用していくことも可能です。
パッケージングにはvsceコマンドを利用します。
|
1 2 |
npm install vsce --save-dev npx vsce package |
無事、パッケージファイル（vsix）が出来ました。
インストール
出来上がったパッケージファイルは、codeコマンドでインストールします。
|
1 |
code --install-extension sample1-0.0.1.vsix |
VSCodeを立ち上げて拡張機能メニューを見ると、インストールされていることが確認できます。
動作確認
それでは、実装した拡張を動作させてみます。
今回想定する独自ログ文字列の例を選択した上で、コマンドパレットから実行してみます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
#=> 独自ログ文字列の例 記事1:ラーメン/80,グルメ/20:ライター1:2020-11-20|記事2:カレー/70,グルメ/20,渋谷/10:ライター2:2020-11-21|記事3:焼肉/50,宴会/30,グルメ/10,渋谷/10:ライター2:2020-11-22 #=> 整形されて見やすくなる 記事1 ラーメン/80,グルメ/20 ライター1 2020-11-20 記事2 カレー/70,グルメ/20,渋谷/10 ライター2 2020-11-21 記事3 焼肉/50,宴会/30,グルメ/10,渋谷/10 ライター2 2020-11-22 |
無事、動作確認することができました。
おわりに
以上、今回はVSCodeの拡張開発を試してみました。
元々ちょっとしたツール類はパイプで渡せるコマンドラインツールとして作成することが多かったですが、エディタに組み込む方が便利なケースも多そうです。
適材適所で作業の効率化をはかっていきたいと思います。
