VS Code Extension 使 StatusBar 按钮打开终端并运行命令

Question

我正在尝试创建一个 vscode 扩展，您可以在其中在状态栏中创建一个按钮，单击该按钮将在终端中运行一个脚本。这将是一个很好的附加组件，特别是对于需要本地服务器、测试运行器或其他服务器（如 Storybook 或 Sanity Studio）的前端项目。

我已经完成了大部分功能，但终端行为没有按预期工作。

用户流程如下；

1. 用户打开命令面板并选择添加按钮的选项
2. 用户输入脚本，例如 npm start 表示 React.js 项目
3. 用户输入状态栏中按钮显示的名称
4. 按钮出现，用户单击它，它将打开终端并运行脚本

   预期的行为是每次按下按钮都会打开一个新终端并使用 1 个脚本。

   现在这适用于一个按钮，但我希​​望多个按钮工作，每个按钮打开一个新终端并运行不同的脚本。就像 npm 脚本侧边栏的工作方式一样。

   现在发生的情况是，对于每个打开的新终端，它们都会收到相同的文本发送给它

   在utilities.ts 我有；

   export function createButton(name: string, command: string) {
     const statusBar = window.createStatusBarItem(StatusBarAlignment.Left, 0)
     statusBar.text = name
     statusBar.command = `workbench.action.terminal.focus`
     statusBar.tooltip = command
     statusBar.show()
     window.onDidOpenTerminal((terminal) => terminal.sendText(command!))
     return statusBar
   }
   

   在具有用户流的addButtonScript 中创建按钮时使用哪个

   export async function addButtonScript(context: ExtensionContext) {
     const command = await window.showInputBox({
       prompt: 'Add in the script command you want to run in the terminal',
     })
     if (!command) return window.showErrorMessage('No command provided')
   
     const name = await nameInput()
     if (!name) return
   
     await createButton(name!, command!)
     await addSingleObjectToState({ context, name, command })
     return
   }
   
   

   这是extension.ts 中activate function 中注册命令的一部分

     const addButton = commands.registerCommand('extension.addButton', () =>
       addButtonScript(context)
     )
   

   无论如何，完整的回购都在这里 - https://github.com/puyanwei/quick-scripts-v2

   我的猜测是，通过这种实现，window.OnDidOpenTerminal 没有正确监听每个单独的终端，而是监听所有终端，这导致脚本全部在新终端中运行，但都使用相同的脚本。

   我很难知道最好使用的命令，你们有​​什么建议吗？

Answer 1

这是一些可以满足您要求的代码：

let disposable3 = vscode.commands.registerCommand('folder-operations.statusBarHandler', async  (...args) =>  {

  const newTerminal = vscode.window.createTerminal();
  newTerminal.show(false);
  newTerminal.sendText(args[0]);
});

let disposable2 = vscode.commands.registerCommand('folder-operations.createFile', async  (...file) =>  {

  const command = await vscode.window.showInputBox({
    prompt: 'Add in the script command you want to run in the terminal',
  });

  if (!command) return vscode.window.showErrorMessage('No command provided');
  const name = await vscode.window.showInputBox({
    prompt: 'Add in the name of the status bar button',
  });
  if (!name) return vscode.window.showErrorMessage('No command provided');

  const statusBar = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Left, 0);
  statusBar.text = name;

  let myCommand = {};
  myCommand.title = command;
  myCommand.command = 'folder-operations.statusBarHandler';
  myCommand.arguments = [command];

  statusBar.command = myCommand;
  statusBar.tooltip = command;
  statusBar.show();
  return statusBar;
});

它使用注册命令folder-operations.statusBarHandler（将其更改为您的extensionID.somename）来运行命令，这比运行单个内置命令要强大得多。

您可以传递该命令参数（在字符串数组中），例如要运行的终端命令。