录制一个“宏"?还是Visual Studio Code中的一系列操作? [英] Recording a 'macro'? or a series of actions in Visual Studio Code?

问题描述

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

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

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

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

解决方案

具有名为

---

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

这将获得该内容:

 "让defaultContent =等待vscode.workspace.fs.readFile(vscode.Uri.parse(`$ {thisWorkspace}/templates/defaultComponent.txt`));， 

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

 "等待we.insert(newUri3，new vscode.Position(0，0)，defaultContent.toString());， 

---

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

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

I would need something like this. Once I create a folder within a project. A React Project for example. I could select that folder and run some kind of macro or series of actions that would do this.

Provided that the name of the folder is Component for example, when the macro would be played it would do this:

Create a file with the name, Component.js that would have some kind of snippet default content. Create a file with the name, Component.styled.js which again would have in it some kind of snippet default content. Create a file with the name index.js that would have the Content: export { default } from './Component' where Component would actually be the name of the folder.

I have no idea where to actually start with this...I've looked into macros and I know how to use visual studio code user snippets, but not sure how this exact thing could be done.

解决方案

With a macro extension called macro-commander you could create a folder and included files (with some default content if you wish) fairly easily. But it looks a little complicated since it is essentially writing an extension in your settings.json but in operation it is smooth. This code goes into your settings.json after you install the extension:

"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(); };",
      ]
    }
  ]
},

It allows you to use the vscode extension api in a setting. To run this macro, set up a keybinding:

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

The first thing it will do is pop up an input box for the folder name. Enter one and hit Enter.

---

If you had default content that you wanted to repeatedly use you could store that and retrieve it for use in this macro. Say the default content is in the same workspace /templates/defaultComponent.txt.

This will get that content:

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

and add it to one of your files:

"await we.insert(newUri3, new vscode.Position(0, 0), defaultContent.toString());",

---

As you can see in the demo, it always opens up a couple of the newly created files for some reason - I don't know how to prevent that.

Although the code is complicated-looking I think it is straightforward to modify it for different file names or content.

这篇关于录制一个“宏"?还是Visual Studio Code中的一系列操作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！