【VSCode】アクティビティーバーで外部コマンドを実行する拡張機能を作成した

npm install -g yo generator-code

yo code

? What type of extension do you want to create? New Extension (TypeScript)

? What's the name of your extension? my-extension

? What's the identifier of your extension? my-extension

? What's the description of your extension? 自作拡張機能

? Initialize a git repository? No

? Which bundler to use? webpack

? Which package manager to use? npm

? Do you want to open the new folder with Visual Studio Code? (Use arrow keys)

To run the extension you need to install the recommended extension 'amodio.tsl-problem-matcher'.

プロジェクトディレクトリ
  ┣ media
  ┃　┗ icon.svg
  ┣ ・・・・

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

 "contributes": {
    "viewsContainers": {
        "activitybar": [
          {
            "id": "myExtSidebar",
            "title": "自作ツール",
            "icon": "media/icon.svg"
          }
        ]
      },
      "views": {
        "myExtSidebar": [
          {
            "id": "myExtSidebarView",
            "name": "コマンド",
            "icon": "media/icon.svg"
          }
        ]
      },
      "commands": [
        {
          "command": "myExt.cmd1",
          "title": "コマンド1"
        },
        {
          "command": "myExt.cmd2",
          "title": "コマンド2"
        },
        {
          "command": "myExt.cmd3",
          "title": "コマンド3"
        }
      ],
      "viewsWelcome": [
      {
        "view": "myExtSidebarView",
        "contents": "[コマンド1](command:myExt.cmd1)"
      },
      {
        "view": "myExtSidebarView",
        "contents": "[コマンド2](command:myExt.cmd2)"
      },
      {
        "view": "myExtSidebarView",
        "contents": "[コマンド3](command:myExt.cmd3)"
      }
    ]
  },

    "viewsContainers": {
        "activitybar": [
          {
            "id": "myExtSidebar",
            "title": "自作ツール",
            "icon": "media/icon.svg"
          }
        ]
      },

      "views": {
        "myExtSidebar": [
          {
            "id": "myExtSidebarView",
            "name": "コマンド",
            "icon": "media/icon.svg"
          }
        ]
      },

      "commands": [
        {
          "command": "myExt.cmd1",
          "title": "コマンド1"
        },
        {
          "command": "myExt.cmd2",
          "title": "コマンド2"
        },
        {
          "command": "myExt.cmd3",
          "title": "コマンド3"
        }
      ],

      "viewsWelcome": [
      {
        "view": "myExtSidebarView",
        "contents": "[コマンド1](command:myExt.cmd1)"
      },
      {
        "view": "myExtSidebarView",
        "contents": "[コマンド2](command:myExt.cmd2)"
      },
      {
        "view": "myExtSidebarView",
        "contents": "[コマンド3](command:myExt.cmd3)"
      }
    ]

プロジェクトディレクトリ
  ┣ command
  ┃　┣ cmd1.js
  ┃　┗ cmd2.js
  ┣ ・・・・
  ┣ media
  ┃　┗ icon.svg
  ┣ ・・・・

console.log( "コマンド１を実行" );

console.error( "コマンド１を実行" );

import * as vscode from 'vscode';
import { exec } from 'child_process';
import * as path from 'path';

export function activate(context: vscode.ExtensionContext) {

	context.subscriptions.push(
		vscode.commands.registerCommand("myExt.cmd1", function () {
			execCall( context , "cmd1" );
		})
	);
	context.subscriptions.push(
		vscode.commands.registerCommand("myExt.cmd2", function () {
			execCall( context , "cmd2" );
		})
	);
	context.subscriptions.push(
		vscode.commands.registerCommand("myExt.cmd3", function () {
			execCall( context , "cmd3" );
		})
	);
}

// This method is called when your extension is deactivated
export function deactivate() {}

const execCall = (context: vscode.ExtensionContext,cmd:string) =>{
	const jsPath = path.join(context.extensionPath,"command",cmd + ".js" );
	const command = `node ${jsPath}`;
        
        cosole.log("コマンドを実行");

	exec(command, (err, stdout, stderr) => {
			if (err) { vscode.window.showErrorMessage(err.message); }
			if( stdout ) {vscode.window.showInformationMessage(stdout);}
			if( stderr ) {vscode.window.showErrorMessage(stderr);}
		});
};

	context.subscriptions.push(
		vscode.commands.registerCommand("myExt.cmd1", function () {
			execCall( context , "cmd1" );
		})
	);

npm install -g @vscode/vsce

npm install
npm run compile

vsce package

ERROR  It seems the README.md still contains template text. Make sure to edit the README.md file before you package or publish your extension.

vsce package

WARNING  A 'repository' field is missing from the 'package.json' manifest file.
Use --allow-missing-repository to bypass.
Do you want to continue? [y/N] y

WARNING  LICENSE, LICENSE.md, or LICENSE.txt not found
Do you want to continue? [y/N] y