录制一个“宏”？或Visual Studio Code中的一系列操作？

如何解决录制一个“宏”？或Visual Studio Code中的一系列操作？

我需要这样的东西。一旦我在项目中创建一个文件夹。例如，一个React工程。我可以选择该文件夹，然后运行某种宏或一系列操作来完成此操作。

例如，假设文件夹的名称为Component，则在播放宏时会执行以下操作：

创建一个名称为Component.js的文件，该文件将包含某种代码段默认内容。创建一个名称为Component.styled.js的文件，该文件中还将包含一些摘要默认内容。创建一个名称为index.js的文件，其内容为：export { default } from './Component'，其中Component实际上是文件夹的名称。

我不知道从哪里真正开始……我已经研究了宏，并且知道如何使用Visual Studio 代码用户代码段，但不确定如何做到这一点。

解决方法

使用名为macro-commander的宏扩展名，您可以轻松地创建一个文件夹并包含文件（如果需要，可以包含一些默认内容）。但这看起来有点复杂，因为它本质上是在settings.json中编写扩展名，但在操作中很流畅。安装扩展后，此代码将进入您的settings.json：

"macros": {

  "createReactFolderAndFiles" : [
  
    { 
      "javascript": [

        "const newReactFolder = await window.showInputBox()",// get the component's name

            // create a object to store various edits,including file creation,deletion and edits
        "const we = new vscode.WorkspaceEdit();",// get the workspace folder path + file:/// uri scheme
        "const thisWorkspace = vscode.workspace.workspaceFolders[0].uri.toString();",// file:///c:/Users/Mark/OneDrive/Test Bed
            // append the new folder name
        "const uriBase = `${thisWorkspace}/${newReactFolder}`;",// file:///c:/Users/Mark/OneDrive/Test Bed/Test

        // "await window.showInformationMessage(` ${uriBase}`)",// just handy to check on progress

            // create uri's for the three files to be created
        "let newUri1 = vscode.Uri.parse(`${uriBase}/index.js`);","let newUri2 = vscode.Uri.parse(`${uriBase}/${newReactFolder}.js`);","let newUri3 = vscode.Uri.parse(`${uriBase}/${newReactFolder}.styled.js`);","let newFiles = [ newUri1,newUri2,newUri3];","for (const newFile of newFiles) { let document = await we.createFile(newFile,{ ignoreIfExists: false,overwrite: true });};","let styledContent = `first line flush left",// how to use template literals in this macro
                             "second line will be flush left","   third line indented`;",//  insert text into the top of each file
        "await we.insert(newUri1,new vscode.Position(0,0),`export { default } from './${newReactFolder}'`);","await we.insert(newUri2,`my ${newReactFolder}.js content`);","await we.insert(newUri3,styledContent);","await vscode.workspace.applyEdit(we);",// apply all the edits: file creation and adding text

        "for (const newFile of newFiles) { let document = await vscode.workspace.openTextDocument(newFile); await document.save(); };",]
    }
  ]
},

它允许您在设置中使用vscode扩展api。要运行此宏，请设置键盘绑定：

{
  "key": "alt+j","command": "macros.createReactFolderAndFiles"
},

要做的第一件事是弹出一个文件夹名称输入框。输入一个，然后按 Enter 。

如果您具有要重复使用的默认内容，则可以存储该内容并将其检索以供在此宏中使用。假设默认内容在同一工作区/templates/defaultComponent.txt中。

这将获得该内容：

  "let defaultContent = await vscode.workspace.fs.readFile(vscode.Uri.parse(`${thisWorkspace}/templates/defaultComponent.txt`));",

并将其添加到您的文件之一：

"await we.insert(newUri3,defaultContent.toString());",

在演示中可以看到，由于某种原因，它总是打开几个新创建的文件-我不知道如何防止这种情况。

尽管代码看起来很复杂，但我认为直接针对不同的文件名或内容进行修改很简单。