Enregistrer une «macro»? ou une série d'actions dans Visual Studio Code?

Question

J'aurais besoin de quelque chose comme ça. Une fois que je crée un dossier dans un projet. Un projet React par exemple. Je pourrais sélectionner ce dossier et exécuter une sorte de macro ou une série d'actions qui feraient cela.

À condition que le nom du dossier soit Componentpar exemple, lorsque la macro serait lue, cela ferait ceci:

Créez un fichier avec le nom, Component.jsqui aurait une sorte de contenu par défaut d'extrait de code. Créez un fichier avec le nom, Component.styled.jsqui contiendrait à nouveau une sorte de contenu par défaut d'extrait de code. Créez un fichier avec le nom index.jsqui aurait le Content: export { default } from './Component'où Component serait en fait le nom du dossier.

Je ne sais pas par où commencer réellement ... J'ai examiné les macros et je sais comment utiliser les extraits de code utilisateur de Visual Studio, mais je ne sais pas comment cela pourrait être fait.

Answer 1

Avec une extension de macro appelée macro-commander, vous pouvez créer un dossier et des fichiers inclus (avec du contenu par défaut si vous le souhaitez) assez facilement. Mais cela semble un peu compliqué car il s'agit essentiellement d'écrire une extension dans votre settings.json mais en fonctionnement, c'est fluide. Ce code va dans votre settings.json après avoir installé l'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(); };",
      ]
    }
  ]
},

Il vous permet d'utiliser l'API d'extension vscode dans un paramètre. Pour exécuter cette macro, configurez une liaison de touches:

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

La première chose à faire est de faire apparaître une zone de saisie pour le nom du dossier. Entrez-en un et appuyez sur Enter.

---

Si vous aviez du contenu par défaut que vous souhaitiez utiliser à plusieurs reprises, vous pouvez le stocker et le récupérer pour l'utiliser dans cette macro. Supposons que le contenu par défaut se trouve dans le même espace de travail /templates/defaultComponent.txt.

Cela obtiendra ce contenu:

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

et ajoutez-le à l'un de vos fichiers:

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

---

Comme vous pouvez le voir dans la démo, cela ouvre toujours quelques fichiers nouvellement créés pour une raison quelconque - je ne sais pas comment empêcher cela.

Bien que le code soit compliqué, je pense qu'il est simple de le modifier pour différents noms de fichiers ou contenus.