Añadiendo la opción run-code a un nuevo lenguaje en VSCode

22 Jul, 2023 Programación 0

Actualmente estoy escribiendo mi propio lenguaje y estoy en un punto en el que me gustaría publicarlo en el VSCode-Marketplace para que las personas puedan probarlo.

He creado una extensión de lenguaje y un resaltador de sintaxis con Yeoman-Generator y ahora quiero combinarlo con mi archivo ejecutable que inicia el intérprete, de modo que un archivo pueda ser interpretado al hacer clic en el botón de ejecución de código.

He revisado varios artículos, como:

¿Cómo agregar un botón de ejecución en Visual Studio Code? – StackOverflow
¿Cómo definir o soportar un lenguaje de código en Visual Studio? – StackOverflow
Guía de extensión del depurador – VSCode API

Sin embargo, no he encontrado nada útil.

Actualmente, el code-runner muestra el siguiente error cuando hago clic en ejecutar o presiono el atajo de teclado:
Imagen del error

(Lenguaje de código no soportado ni definido)

Pero incluso después de buscar en Google para agregar soporte de nuevo lenguaje al code-runner, no encontré nada útil.

(Ver esta página, ¡no sé a qué configuraciones/preferencias se refieren!)

Tampoco tuve éxito con las tareas, ya que no parecen estar conectadas de ninguna manera con el botón de ejecución o el botón de depuración.

Mi pregunta es: ¿Cómo puedo hacer que el botón de ejecución ejecute un comando de bash personalizado cuando se abre un archivo en mi lenguaje?

davy.ai

July 22, 2023 at 2:23 am

Añadiendo el botón de ejecución para un lenguaje personalizado en VSCode

Como experto en tecnologías de la información especializado en Visual Studio Code y sus extensiones, incluyendo Yeoman-Generator, existen varias formas de hacer que el botón de ejecución ejecute un comando bash personalizado cuando se abra un archivo en tu lenguaje. Aquí tienes los pasos:

1. Definir opciones de configuración

Debes definir las opciones de configuración para tu extensión en el archivo package.json. Añade este fragmento de código al archivo para especificar la propiedad program de tu lenguaje:

"contributes": {
    "languages": [...],
    "debuggers": [...],
    "configuration": {
        "type": "object",
        "title": "Mi Lenguaje",
        "properties": {
            "myLanguage.program": {
                "type": "string",
                "description": "Ruta al ejecutable del intérprete de Mi Lenguaje.",
                "default": "/ruta/al/interprete/de/mi/lenguaje"
            }
        }
    }
}

Esto añadirá la opción de configuración myLanguage.program para tu lenguaje en la sección de Configuración/Preferencias. Los usuarios pueden establecer la ruta de su ejecutable en esta opción.

2. Registrar proveedor de configuración de depuración

También debes registrar un proveedor de configuración de depuración en tu extensión. Aquí tienes un ejemplo:

import * as vscode from 'vscode';

export class MyLanguageConfigurationProvider implements vscode.DebugConfigurationProvider {
    resolveDebugConfiguration(folder: vscode.WorkspaceFolder | undefined, config: vscode.DebugConfiguration, token?: vscode.CancellationToken): vscode.ProviderResult<vscode.debugconfiguration> {
        if (!config.request) {
            config.request = 'launch';
        }
        if (!config.type && !config.request) {
            return undefined;
        }
        if (!config.program) {
            // obtener ruta del programa desde la configuración de la extensión
            config.program = vscode.workspace.getConfiguration().get('myLanguage.program');
        }
        return config;
    }
}

Este proveedor establece la propiedad program de la configuración de tu lenguaje, que se utiliza para iniciar el intérprete. Puedes registrar este proveedor en la función activate de tu extensión de esta manera:

export function activate(context: vscode.ExtensionContext) {
    let provider = new MyLanguageConfigurationProvider();
    context.subscriptions.push(vscode.debug.registerDebugConfigurationProvider('myLanguage', provider));
}

3. Definir configuración de lanzamiento

A continuación, define la configuración de lanzamiento en el archivo launch.json de tu extensión. Aquí tienes un ejemplo:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "myLanguage",
            "request": "launch",
            "name": "Lanzar Mi Lenguaje",
            "program": "${file}"
        }
    ]
}

La propiedad program se establece como ${file} para lanzar el intérprete con el archivo actualmente abierto en VSCode. Puedes añadir más propiedades a esta configuración para personalizarla según sea necesario.

4. Añadir botón de ejecución

Finalmente, puedes añadir el botón de ejecución para tu lenguaje personalizado editando el archivo keybindings.json en la configuración de tu VSCode. Añade este enlace a una tecla para asociar el comando de ejecución con la configuración de lanzamiento de tu lenguaje:

{
    "key": "ctrl+r",
    "command": "workbench.action.debug.run",
    "args": {
        "config": {
            "type": "myLanguage",
            "name": "Lanzar Mi Lenguaje"
        }
    },
    "when": "editorTextFocus && !inDebugMode && editorLangId == 'myLanguage'"
}

Este enlace de tecla ejecutará la configuración Lanzar Mi Lenguaje para myLanguage cuando el usuario presione ctrl+r mientras edita un archivo con el ID de lenguaje myLanguage.

¡Eso es todo! Ahora, tu extensión debería tener un botón de ejecución para tu lenguaje personalizado en VSCode. Los usuarios pueden hacer clic en el botón o usar el atajo ctrl+r para ejecutar el intérprete en sus archivos.</vscode.debugconfiguration>

Answer

davy.ai

July 22, 2023 at 2:23 am
Añadiendo el botón de ejecución para un lenguaje personalizado en VSCode

Como experto en tecnologías de la información especializado en Visual Studio Code y sus extensiones, incluyendo Yeoman-Generator, existen varias formas de hacer que el botón de ejecución ejecute un comando bash personalizado cuando se abra un archivo en tu lenguaje. Aquí tienes los pasos:

1. Definir opciones de configuración

Debes definir las opciones de configuración para tu extensión en el archivo package.json. Añade este fragmento de código al archivo para especificar la propiedad program de tu lenguaje:
```
"contributes": {
    "languages": [...],
    "debuggers": [...],
    "configuration": {
        "type": "object",
        "title": "Mi Lenguaje",
        "properties": {
            "myLanguage.program": {
                "type": "string",
                "description": "Ruta al ejecutable del intérprete de Mi Lenguaje.",
                "default": "/ruta/al/interprete/de/mi/lenguaje"
            }
        }
    }
}
```
Esto añadirá la opción de configuración myLanguage.program para tu lenguaje en la sección de Configuración/Preferencias. Los usuarios pueden establecer la ruta de su ejecutable en esta opción.

2. Registrar proveedor de configuración de depuración

También debes registrar un proveedor de configuración de depuración en tu extensión. Aquí tienes un ejemplo:
```
import * as vscode from 'vscode';

export class MyLanguageConfigurationProvider implements vscode.DebugConfigurationProvider {
    resolveDebugConfiguration(folder: vscode.WorkspaceFolder | undefined, config: vscode.DebugConfiguration, token?: vscode.CancellationToken): vscode.ProviderResult<vscode.debugconfiguration> {
        if (!config.request) {
            config.request = 'launch';
        }
        if (!config.type && !config.request) {
            return undefined;
        }
        if (!config.program) {
            // obtener ruta del programa desde la configuración de la extensión
            config.program = vscode.workspace.getConfiguration().get('myLanguage.program');
        }
        return config;
    }
}
```
Este proveedor establece la propiedad program de la configuración de tu lenguaje, que se utiliza para iniciar el intérprete. Puedes registrar este proveedor en la función activate de tu extensión de esta manera:
```
export function activate(context: vscode.ExtensionContext) {
    let provider = new MyLanguageConfigurationProvider();
    context.subscriptions.push(vscode.debug.registerDebugConfigurationProvider('myLanguage', provider));
}
```
3. Definir configuración de lanzamiento

A continuación, define la configuración de lanzamiento en el archivo launch.json de tu extensión. Aquí tienes un ejemplo:
```
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "myLanguage",
            "request": "launch",
            "name": "Lanzar Mi Lenguaje",
            "program": "${file}"
        }
    ]
}
```
La propiedad program se establece como ${file} para lanzar el intérprete con el archivo actualmente abierto en VSCode. Puedes añadir más propiedades a esta configuración para personalizarla según sea necesario.

4. Añadir botón de ejecución

Finalmente, puedes añadir el botón de ejecución para tu lenguaje personalizado editando el archivo keybindings.json en la configuración de tu VSCode. Añade este enlace a una tecla para asociar el comando de ejecución con la configuración de lanzamiento de tu lenguaje:
```
{
    "key": "ctrl+r",
    "command": "workbench.action.debug.run",
    "args": {
        "config": {
            "type": "myLanguage",
            "name": "Lanzar Mi Lenguaje"
        }
    },
    "when": "editorTextFocus && !inDebugMode && editorLangId == 'myLanguage'"
}
```
Este enlace de tecla ejecutará la configuración Lanzar Mi Lenguaje para myLanguage cuando el usuario presione ctrl+r mientras edita un archivo con el ID de lenguaje myLanguage.

¡Eso es todo! Ahora, tu extensión debería tener un botón de ejecución para tu lenguaje personalizado en VSCode. Los usuarios pueden hacer clic en el botón o usar el atajo ctrl+r para ejecutar el intérprete en sus archivos.</vscode.debugconfiguration>

Comments are closed.

es.davy.ai

¿Tienes una pregunta?