录制一个'macro'？或 Visual Studio 代码中的一系列操作？

Question

我需要这样的东西。一旦我在项目中创建了一个文件夹。例如一个 React 项目。我可以 select 该文件夹和运行某种宏或一系列可以执行此操作的操作。

假设文件夹的名称是Component，例如，播放宏时会这样做：

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

我不知道从哪里开始...我研究了宏并且我知道如何使用 visual studio 代码用户片段，但不确定如何完成这件事。

Answer 1

使用名为 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, new vscode.Position(0, 0), `my ${newReactFolder}.js content`);",
        "await we.insert(newUri3, new vscode.Position(0, 0), 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, new vscode.Position(0, 0), defaultContent.toString());",

正如您在演示中看到的那样，出于某种原因，它总是会打开几个新创建的文件 - 我不知道如何防止这种情况发生。

虽然代码是complicated-looking，但我认为针对不同的文件名或内容修改它很简单。

录制一个'macro'？或 Visual Studio 代码中的一系列操作？

Recording a 'macro'? or a series of actions in Visual Studio Code?

macros

code-snippets

visual-studio-code

vscode-snippets