作りながら遠回りしているなぁと感じていましたが、やっぱり普通な方法がありました...
ts-nodeをインストールしましょう。解決です。
まあこれはこれでいい経験になったということで。

追記2: 一応動いていますが、コードも構造もすごく汚いです。いつか書き直します

目的

Typescriptを始めてみたはいいけど、コンパイルのたびにターミナルを叩くのが少しだけめんどくさい...
→　いい機会だしVScodeの拡張機能を自作してみよう！

環境

wsl2 : Ubuntu v20.04.4 LTS
Node.js : v16.17.1

結果

ヨシ!

下にあるtscボタンを押す（以下自動）
ターミナルが表示される
tsconfig.jsonが作られる
$tscコマンドが実行されてコンパイル
./outディレクトリの中にコンパイルされた.jsファイルができる。

導入

ターミナルで

npm install -g yo generator-code

を実行し、次に

yo code

を実行します。表示される質問に適当に答えていくと、テンプレートが出来上がります。この辺りは日本語の検索結果もたくさんあったと思います。このときJavascriptかTypescriptか選べますが、せっかくなのでTypescriptを選択しました。

node_modules内にエラーが出ましたが、

npm upgrade

で解決しました。

実装

概要

コマンドを考える
拡張が有効になったとき、コマンドをVSCodeに登録する
そのコマンドを実行できるボタンを表示させる

そのコマンドでやってほしいこと

VSCodeのターミナルを開く。そのターミナルで以下を実行する

ルートディレクトリに移動

cd ルートディレクトリのPath

tsconfig.jsonファイルが存在しなければ、作成

echo tsconfig.jsonの中身 >> tsconfig.json

コンパイルを実行

tsc

これだけ

コード

.src/extension.tsに書いていきます。使いたい機能の書き方を公式ドキュメントから頑張って調べましょう。今回はファイルの存在の有無を取得する方法と、ターミナルを操作する方法を探しました。

　export function activate(context: vscode.ExtensionContext) の中身


// 適当なコマンド名を考えます。
let disposable = vscode.commands.registerCommand('extension.tsccompile', () => {

  if (vscode.workspace.workspaceFolders) {
    // If you only open a file, this command will not be run

    // 生成するtsconfig.jsonの中身
    const tsconfig = `{
  "compilerOptions": {
    "module": "commonjs",
    "target": "ES2020",
    "outDir": "out",
    "lib": [
      "ES2020"
    ],
    "sourceMap": true,
    "strict": true   /* enable all strict type-checking options */
  }
}`;

    // アクティブなターミナルがなければ、新たに作成
    const terminal = vscode.window.activeTerminal ?? vscode.window.createTerminal();
    // ルートディレクトリに移動
    terminal.sendText(`cd ${vscode.workspace.workspaceFolders[0].uri.path}`);
    terminal.show();

    // tsconfig.jsonを探す
    vscode.workspace.findFiles('tsconfig.json').then((value) => {

      if (!value.length) {
      // 存在しない場合
      // 注意：valueはtrueを返してしまうため、value.lengthかvalue[0]で判定する

        // 実行順が入れ替わらないよう、tscまでまとめて記述
        // ダブルクウォートをエスケープしておく
        // $echo content >> filename
        terminal.sendText(`echo "${tsconfig.replace(/\"/g, '\\"')}" >> tsconfig.json \ntsc`);
        vscode.window.showInformationMessage('tsconfig.json was created!');

      } else {
        // 存在する場合
        terminal.sendText('tsc');
      }
    });
  }
});

// ボタンを作成し、上記コマンドを埋め込み、表示する
const button =  vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Left);
button.command = 'extension.tsccompie';
button.tooltip = 'Run $tsc to compile.\n If tsconfig.json does not exist, create it first.';
button.text = 'tsc';
button.show();

context.subscriptions.push(button);
context.subscriptions.push(disposable);

package.jsonの中身も変えます。

activationEventsの中身

"activationEvents": [
    "onCommand:extension.tsccompile",
    "onLanguage:typescript"
 ],

.tsファイルを開くとコマンドが登録されるようになります。

contributesの中身

"contributes": {
    "commands": [
      {
        "command": "extension.tsccompile",
        "title": "Hello World"
      }
    ]
  },

上のほうで先ほど適当に考えたコマンド名に変えます。タイトルは適当でOK.

これで動きます。F5キーでデバッグ用ウィンドウを開き、.tsファイルを含むフォルダを作り、開くとtscボタンが表示されます。

パッケージング

完成したら、

npx vsce package

を実行して、適当に質問に答えていくと、.vsix拡張子のファイルができます。これを、拡張機能のオプション画面からインストールすると、使えるようになります。

ソースコード(GitHub)

VSCode拡張を自作した話

目的

環境

結果

導入

実装

概要

そのコマンドでやってほしいこと

コード

パッケージング