はじめに

VSCodeのエクステンション作りにチャレンジしたメモです。

Image may be NSFW.
Clik here to view.注意Image may be NSFW.
Clik here to view.

• メモ書きなのでかなりザックリです、、
• オレオレエクステンション作りなので、マーケットプレイスへのデプロイは行っていません

VSCodeエクステンション手順

エクステンション作りの手順はこちらに沿います。

• Node.js環境作成
  • yo
  • generator-code
  • vsce
• エクステンション作成
  • yoで雛形作成
  • 実装
  • デバッグ
• ローカルデプロイ
  • Azure DevOpsアカウント取得
  • パブリッシャー作成
  • vsixファイル作成

手順詳細

Node.js環境作成

Node.js本体はインストール済とします。

$ node --version# v14.2.0$ npm --version# v6.14.6

yo

実装テンプレートの雛形ジェネレーター yoをインストールします。

$ npm install-g yo

generator-code

yoでジェネレートするVSCodeエクステンションの雛形です。

$ npm install-g generator-code

vsce

Node.jsアプリケーションをビルドし、エクステンションファイル vsixを生成するビルドツールです。

$ npm install-g vsce

エクステンション作成

yoで雛形作成

yoでVSCodeエクステンションの雛形を作ります。

$ yo code

インタラクティブにプロジェクト名等のメタ情報を入力しながら、雛形を作ることが出来ます。
今回は sampleと言うエクステンションを作ったとして、以降も書き進めます。

実装

生成されたソースのうち、エクステンションの処理本体が実装される extension.jsをメンテナンスします。yo codeで生成した場合、下記のコードが生成されています。

// The module 'vscode' contains the VS Code extensibility API// Import the module and reference it with the alias vscode in your code belowconstvscode=require('vscode');// this method is called when your extension is activated// your extension is activated the very first time the command is executed/**
 * @param {vscode.ExtensionContext} context
 */functionactivate(context){// Use the console to output diagnostic information (console.log) and errors (console.error)// This line of code will only be executed once when your extension is activatedconsole.log('Congratulations, your extension "sample" is now active!');// The command has been defined in the package.json file// Now provide the implementation of the command with  registerCommand// The commandId parameter must match the command field in package.jsonletdisposable=vscode.commands.registerCommand('sample.helloWorld',function(){// The code you place here will be executed every time your command is executed// Display a message box to the uservscode.window.showInformationMessage('Hello World from sample!');});context.subscriptions.push(disposable);}exports.activate=activate;// this method is called when your extension is deactivatedfunctiondeactivate(){}module.exports={activate,deactivate}

エクステンションが有効化された時にコールされる activateと 無効化時コールの deactiveを作り上げていくことになります。
また、言ってしまえばシンプルな Node.js製のアプリケーションなので、パブリックな npmモジュールも npm install ${ライブラリ名} --saveですんなりと利用出来ます。

デバッグ

extension.jsはデバッグ実行が出来ます。
サイドメニューのデバッグアイコンを押下し、キャプチャ矢印の「▶︎」ボタンを押すと

Image may be NSFW.
Clik here to view.

デバッグ実行用にエクステンションがロードされた別ウィンドウが開くので、コマンドパレットでエクステンションを指定（雛形では Hello World）して実行出来ます。

ローカルデプロイ

エクステンションをローカルデプロイする場合、エクステンションファイル（.vsixファイル）をローカルでビルドした上で、VSCode本体にロードする形になります。

Azure DevOpsアカウント取得

Azure DevOpsをアカウントを取得し、エクステンションのパブリッシャーとAPIキーを取得します。
APIキー取得はこちらを参照下さい。APIキーのスコープ設定をこちらのドキュメントに沿わずに行うと、次手順で認証・権限系のエラーに見舞われます、、

パブリッシャー作成

$ vsce create-publisher ${ユーザ名}

インタラクティブ形式でユーザ名やAPIキーを問われるため、入力して下さい。

vsixファイル作成

package.jsonに publisherの項目を書き足した上、アプリケーションのディレクトリ直下で

$ vsce package

を実行すると、sample-${package.jsonに記載のバージョン}.vsixが生成されます。
VSCodeのエクステンションタブから「…」を押下して Install from VSIXから、生成されたファイルをロードすれば、ローカルインストールが完了します。

Image may be NSFW.
Clik here to view.

まとめ

雛形からシンプルで、JavaScriptや Node.jsアプリケーションの入門としても割と良いネタになるかもなーとのイメージです。
会社でもプライベートでもあんまりフロントエンドとはたわむれていないので、私もVSCodeのカスタマイズと共にちょっと遊んでみようと思います。