VSCode拡張機能を作りこむ手順 #TypeScript

VSCodeでカーソル行のファイル文字列を使って既定のアプリで開くことができたら便利かと思いアドバイスをいただきながらも無事思った機能ができました。
そのとき拡張機能作成の手順を整理しました。

欲しかった機能

VSCodeでカーソル行のファイル文字列を使って既定のアプリで開きたい。

sample.txt

C:\tmp\test.xlsx
C:\tmp\サンプル.txt
"C:\tmp\サンプル.txt"

例えばsample.txtのようなものを開いていたら
test.xlsxの行でF1を押すとExcelでファイルが開かれる
サンプル.txtの行でF1を押すとtxtに関連付けられたファイルが開く機能です。

実現方法

どうやら拡張機能に類似の機能があったようですがこれから自身で開発ができるように拡張機能を自作してみました。

以下は欲しかった機能を実現したときの最短経路です。

STEP0 とりあえずまねる

Visual Studio Codeの拡張機能を一通り触って自分用に公開するまで

こちらを参考させていただきました。
そうするとテキストを選択したときの情報が取得できています。

残る機能は以下の３点になります。
1.関連付けたアプリケーションで開く
2.選択せずに現在行の情報を取得する
3.ショートカットキーで実行する

STEP2 関連付けたアプリケーションで開く

ググってみると openというライブラリが使えそうでした。

まず以下のコマンドを実行します。そのあとVSCodeを立ち上げなおします。

npm install open

package.jsonのdependenciesにopenが追加されることを確認しましょう。
この記載がないとデバッグはできても。パッケージ化したときにコマンドが組み込まれず拡張機能が動作しませんでした。

以下のように書き換えます。

src/extention.ts

import * as vscode from 'vscode';
import * as openPath from 'open';

export function activate(context: vscode.ExtensionContext) {

	console.log('Congratulations, your extension "open-defaultapplication" is now active!');

	let disposable = vscode.commands.registerCommand('open-defaultapplication.helloWorld', () => {

		let editor = vscode.window.activeTextEditor;
		if (!editor) {
			vscode.window.showWarningMessage('No active text editor found!');
			return;
		}
		let text = editor.document.getText(editor.selection);
        vscode.window.showInformationMessage("length:" + text.length);
		openPath(text);
	});
	context.subscriptions.push(disposable);
}
export function deactivate() { }

選択した文字列でアプリが起動しました。

STEP 3 選択せずに現在行の情報を取得する

ググったところ以下のように書き換えれば行けそうです。
ダブルクォーテーションも取り除きます。

let text = editor.document.getText(editor.selection);
↓
let text = editor.document.lineAt(editor.selection.active.line).text.replace(/\"/g, "");

STEP4 ショートカットキーで実行する

keybindingsの部分を書き加えることで実現できました。
これでf1キー,f2キーと順番に押すとファイルが開きます。

package.json

抜粋です。
  "activationEvents": [],
  "main": "./out/extension.js",
  "contributes": {
    "commands": [
      {
        "command": "open-defaultapplication.helloWorld",
        "title": "Hello World"
      }
    ],
    "keybindings": [
      {
        "command": "open-defaultapplication.helloWorld",
        "key": "f1 f2",
        "mac": "shift+cmd+x"
      }
    ]
  },

STEP5 パッケージ化する

README.mdをちゃんと書きます。
面倒な場合はREADME.mdの3行目あたりを削除します。
これをしないと次のパッケージ化の工程でエラーがでます。

以下のコマンドを実行します。

npm install -g vsce
vsce package

作成されたvsixファイルをvscodeでインストールすればVSCODEに導入完了です。

STEP6 もっと機能をつくりこむ

目的の機能が実現できましたのでまとめはここまでとします。
※helloWorldがソース内に残っていますが最小手順とするためそのままです。

ここまではいろいろなコードをつなぎ合わせて実現できました。
皆さん、どうやって目的の機能を作っているんでしょうか？
「vscode-api」を見て使えそうな機能を探すのでしょうか？
https://code.visualstudio.com/api/references/vscode-api

いい情報お持ちでしたら教えてください。

ここからは類似の拡張機能をしばらく学びます。

アドバイスいただいた時の質問はこちら
[Q&A] VSCodeでカーソル行に記述したファイルを開きたい - Qiita

追記

ここを学ぶのが王道だと感じました。英語のページも探すのが大切だと最近気づきました。