Cómo crear su primera extensión de Visual Studio Code

Introducción

Visual Studio Code es un editor de código de Microsoft disponible en Windows, Linux y macOS. Ofrece extensiones que puedes instalar a través de Visual Studio Code Marketplace para obtener funciones adicionales en tu editor. Cuando no puedes encontrar una extensión que haga exactamente lo que necesitas, es posible crear una propia.

En este artículo, creará su primera extensión de Visual Studio Code.

Prerrequisitos

Para completar este tutorial, necesitarás:

• Descargue e instale la última versión de Visual Studio Code .
• Node.js instalado en su máquina siguiendo Cómo instalar Node.js y crear un entorno de desarrollo local .

Este tutorial fue verificado con Node v14.4.0, npmv6.14.5, yov3.1.1 y generator-codev1.2.16.

Paso 1: Instalación de las herramientas

El equipo de Visual Studio Code creó un generador para crear extensiones, que genera todos los archivos de inicio necesarios para comenzar a crear su extensión.

Para comenzar a desarrollar extensiones de VS Code, necesitará dos paquetes npm diferentes:

• yo– una interfaz de línea de comandos para Yeoman .
• generator-code– un generador Yeoman para escribir extensiones de Visual Studio Code.

Puede utilizar la Terminal integrada de Visual Studio Code para npxejecutar copias locales de yoy generator-codeluego ejecutar el comando yo codepara inicializar su nuevo proyecto:

npx -p yo -p generator-code yo code

En este punto, Yeoman ejecutará el generador de código.

Paso 2: Crea tu primera extensión

Ahora está listo para crear su primera extensión.

A continuación, responderá varias preguntas sobre su proyecto. Deberá elegir qué tipo de extensión está creando y entre “TypeScript” y “JavaScript”. En este tutorial, elegiremos JavaScript.

A continuación, se le presentarán algunas preguntas más. Para este tutorial, se seleccionaron las siguientes opciones:

? What type of extension do you want to create? New Extension (JavaScript)? What's the name of your extension? testytest? What's the identifier of your extension? testytest? What's the description of your extension? This is a test extension? Enable JavaScript type checking in 'jsconfig.json'? Yes? Initialize a git repository? Yes? Which package manager to use? npm

Una vez finalizado este proceso, tendrás todos los archivos que necesitas para empezar. Los dos archivos más importantes son:

• package.json
• extension.js

Ábrelo package.jsony echemos un vistazo. Verás el nombre, la descripción, etc. Hay dos secciones más que son muy importantes.

• activationEvents: esta es una lista de eventos que activarán su extensión. Las extensiones se cargan de forma diferida, por lo que no se activan hasta que se produce uno de estos eventos de activación.
• commands:lista de comandos que usted proporciona al usuario para ejecutar a través de su extensión.

Volveremos sobre estos temas en breve.

paquete.json

{  // ...  "activationEvents": [    "onCommand:testytest.helloWorld"  ],  "main": "./extension.js",  "contributes": {    "commands": [      {        "command": "testytest.helloWorld",        "title": "Hello World"      }    ]  },  // ...}

También puedes echar un vistazo al extension.jsarchivo. Aquí es donde vamos a escribir el código para nuestra extensión. Hay un código repetitivo aquí, así que vamos a desglosarlo.

En la línea resaltada a continuación se encuentra el lugar donde se registra nuestro comando con VS Code. Observe que este nombre helloWorldes el mismo que el comando en package.json. Esto es intencional. package.jsonDefine qué comandos están disponibles para el usuario, pero el extension.jsarchivo registra el código para ese comando.

extensión.js

// .../** * @param {vscode.ExtensionContext} context */function activate(context) {  console.log('Congratulations, your extension "testytest" is now active!');  let disposable = vscode.commands.registerCommand('testytest.helloWorld', function () {    vscode.window.showInformationMessage('Hello World from testytest!');  });  context.subscriptions.push(disposable);}// ...

En este Hello Worldejemplo, todo lo que hará este comando es mostrar un mensaje de “Hola mundo” al usuario.

Paso 3: depuración de la extensión

Ahora que tenemos todos los archivos necesarios instalados, podemos ejecutar nuestra extensión.

La .vscodecarpeta es donde VS Code almacena archivos de configuración para su proyecto. En este caso, incluye un launch.jsonque contiene configuraciones de depuración.

.vscode/launch.json

// ...{  // ...  "configurations": [    {      "name": "Run Extension",      "type": "extensionHost",      "request": "launch",      "runtimeExecutable": "${execPath}",      "args": [        "--extensionDevelopmentPath=${workspaceFolder}"      ]    },    // ...  ]}

Desde aquí podemos depurar. Abre la pestaña de depuración en el lado izquierdo de la pantalla y haz clic en el icono de reproducción.

Esto abrirá una nueva instancia (de depuración) de VS Code.

Con esta instancia de depuración de VS Code abierta, puedes abrir la paleta de comandos COMMAND+SHIFT+Pen Mac o CTRL+SHIFT+Pen Windows y ejecutar Hello World .

Verás aparecer un mensaje “Hola mundo” en la esquina inferior derecha.

Paso 4: Edición de la extensión

Antes de trabajar en el código, echemos un vistazo más a la activationEventssección del package.jsonarchivo. Nuevamente, esta sección contiene una lista de eventos que activarán nuestra extensión cuando ocurran. De manera predeterminada, está configurada para activarse cuando se ejecuta nuestro comando.

En teoría, este evento podría ser cualquier cosa, y más específicamente *cualquier cosa. Si se establece el evento de activación en *este, significa que su extensión se cargará cuando se inicie VS Code. Esto no es obligatorio de ninguna manera, solo es una nota.

paquete.json

{  // ...  "activationEvents": [    "*"  ],  // ...}

Tenemos los archivos necesarios y sabemos cómo depurar. Ahora comencemos a crear nuestra extensión. Supongamos que queremos que esta extensión pueda crear un archivo HTML que ya contenga código repetitivo y que se agregue a nuestro proyecto.

Primero, vamos a actualizar el nombre de nuestro comando. En extension.js, actualice el nombre del comando de extension.helloworlda extension.createBoilerplate.

extensión.js

// .../** * @param {vscode.ExtensionContext} context */function activate(context) {  console.log('Congratulations, your extension "testytest" is now active!');  let disposable = vscode.commands.registerCommand('testytest.createBoilerplate', function () {    vscode.window.showInformationMessage('Hello World from testytest!');  });  context.subscriptions.push(disposable);}// ...

Ahora, actualice el package.jsonarchivo según el cambio de comando.

paquete.json

{  // ...  "activationEvents": [    "onCommand:testytest.createBoilerplate"  ],  "main": "./extension.js",  "contributes": {    "commands": [      {        "command": "testytest.createBoilerplate",        "title": "Create Boilerplate"      }    ]  },  // ...}

Ahora, escribamos nuestra funcionalidad. Lo primero que haremos será requerir un par de paquetes. Vamos a utilizar el fs(sistema de archivos) y pathlos módulos.

extensión.js

const fs = require('fs');const path = require('path');

También necesitamos obtener la ruta a la carpeta actual. Dentro del comando, agregue el siguiente fragmento:

extensión.js

if (!vscode.workspace) {  return vscode.window.showErrorMessage('Please open a project folder first');}const folderPath = vscode.workspace.workspaceFolders[0].uri  .toString()  .split(':')[1];

También necesitaremos almacenar nuestro código HTML repetitivo en una variable para poder escribirlo en un archivo. Aquí está el código HTML repetitivo:

extensión.js

const htmlContent = `!DOCTYPE htmlhtmlhead  meta charset="UTF-8" /  meta name="viewport" content="width=device-width, initial-scale=1.0" /  meta http-equiv="X-UA-Compatible" content="ie=edge" /  titleDocument/title  link rel="stylesheet" href="app.css" //headbody  script src="app.js"/script/body/html`;

Ahora necesitamos escribir en el archivo. Podemos llamar a la writeFilefunción del módulo del sistema de archivos y pasarle la ruta de la carpeta y el contenido HTML.

Tenga en cuenta que utilizamos el módulo de ruta para combinar la ruta de la carpeta con el nombre del archivo que queremos crear. Luego, dentro de la devolución de llamada, si hay un error, se lo mostramos al usuario. De lo contrario, le informamos al usuario que creamos el archivo repetitivo correctamente:

extensión.js

fs.writeFile(path.join(folderPath, 'index.html'), htmlContent, (err) = {  if (err) {    return vscode.window.showErrorMessage('Failed to create boilerplate file!');  }  vscode.window.showInformationMessage('Created boilerplate files');});

Así es como se ve la función completa:

extensión.js

//...  let disposable = vscode.commands.registerCommand(    'testytest.createBoilerplate', async function () {    // The code you place here will be executed every time your command is executed    if (!vscode.workspace) {      return vscode.window.showErrorMessage('Please open a project folder first');    }    const folderPath = vscode.workspace.workspaceFolders[0].uri      .toString()      .split(':')[1];    const htmlContent = `!DOCTYPE htmlhtmlhead  meta charset="UTF-8" /  meta name="viewport" content="width=device-width, initial-scale=1.0" /  meta http-equiv="X-UA-Compatible" content="ie=edge" /  titleDocument/title  link rel="stylesheet" href="app.css" //headbody  script src="app.js"/script/body/html`;    fs.writeFile(path.join(folderPath, 'index.html'), htmlContent, (err) = {      if (err) {        return vscode.window.showErrorMessage(          'Failed to create boilerplate file!'        );      }      vscode.window.showInformationMessage('Created boilerplate files');    });    // ...  }// ...

Continúe y depure la extensión que acaba de desarrollar. Luego, abra la paleta de comandos y ejecute Create Boilerplate (recuerde que cambiamos el nombre).

Después de ejecutar el comando, verá el index.htmlarchivo recién generado y un mensaje para informar al usuario:

Conclusión

Para obtener más información sobre qué API existen y cómo usarlas, lea la documentación de la API de extensión de Visual Studio Code .

El código para este tutorial está disponible en GitHub .