¿Cómo puedo tener un botón mostrado en la vista principal de las extensiones de VS Code junto a los elementos de idioma?

Answer

1. 

   davy.ai

   July 17, 2023 at 8:18 pm

   Sí, es posible agregar un icono clickeable con una devolución de llamada manejable en la ventana principal del editor de texto junto a elementos de lenguaje como nombres de funciones o variables. Esto se puede lograr utilizando la API de decoraciones proporcionada por Visual Studio Code.

   Las decoraciones son una forma de agregar información adicional o elementos visuales al editor de texto. Puedes definir un tipo de decoración y especificar su posición y apariencia. Luego puedes aplicar la decoración a rangos de texto en el documento utilizando un objeto DecorationOptions.

   Para agregar un icono junto a los nombres de funciones o variables, puedes definir un tipo de decoración con un icono o imagen. Luego, puedes usar una expresión regular o un analizador específico del lenguaje para buscar definiciones de funciones o declaraciones de variables en el documento. Finalmente, puedes aplicar la decoración con un controlador de clic al rango de texto que corresponde a la función o variable.

   Aquí tienes un ejemplo de fragmento de código que muestra cómo definir un tipo de decoración con una imagen y aplicarlo a un nombre de función:

   const runDecorationType = vscode.window.createTextEditorDecorationType({
     gutterIconPath: path.join(__dirname, 'run-icon.png'),
   });
   
   function applyRunDecoration(editor: vscode.TextEditor) {
     const document = editor.document;
     const regex = /function\s+run\s*\(/gi;
     const decorations: vscode.DecorationOptions[] = [];
     let match: RegExpExecArray | null;
     while (match = regex.exec(document.getText())) {
       const startPos = document.positionAt(match.index);
       const endPos = document.positionAt(match.index + match[0].length);
       const decoration = { range: new vscode.Range(startPos, endPos), hoverMessage: 'Haz clic para ejecutar la función' };
       decoration.command = { title: 'Ejecutar función', command: 'myExtension.runFunction', arguments: [startPos.line] };
       decorations.push(decoration);
     }
     editor.setDecorations(runDecorationType, decorations);
   }
   
   vscode.window.onDidChangeActiveTextEditor(editor => {
     if (editor) {
       applyRunDecoration(editor);
     }
   });
   
   vscode.workspace.onDidChangeTextDocument(event => {
     if (event.document === vscode.window.activeTextEditor?.document) {
       applyRunDecoration(vscode.window.activeTextEditor);
     }
   });
   
   vscode.commands.registerCommand('myExtension.runFunction', async (line: number) => {
     const editor = vscode.window.activeTextEditor;
     if (editor) {
       const document = editor.document;
       const lineText = document.lineAt(line).text;
       const functionNameMatch = /function\s+(\w+)/.exec(lineText);
       if (functionNameMatch) {
         const functionName = functionNameMatch[1];
         await vscode.window.showInformationMessage(`Ejecutando función ${functionName}...`);
         // TODO: implementar la lógica para ejecutar la función
       }
     }
   });
   

   Este código define un tipo de decoración con un archivo de imagen run-icon.png. Luego define una función applyRunDecoration que busca definiciones de funciones con la expresión regular /function\s+run\s*\(/gi y aplica la decoración con un controlador de clic a cada coincidencia. El controlador de clic se registra como un comando myExtension.runFunction que toma un argumento de número de línea y muestra un mensaje de información antes de ejecutar la función.

   Las decoraciones se actualizan cada vez que el editor de texto activo o el contenido del documento cambia. Las decoraciones se eliminan cuando se desactiva la extensión.

   Ten en cuenta que este es solo un ejemplo simple y hay muchas formas de personalizar las decoraciones y los controladores de clic. También puedes usar otros tipos de iconos o imágenes, o usar otros disparadores como el desplazamiento del mouse o la selección. También puedes combinar múltiples decoraciones y controladores de clic para crear interacciones más complejas.

Comments are closed.