Conceptos fundamentales para crear una extensión para Visual Studio Code en JavaScript o Typescript.
VS Code (Visual Studio Code) es uno de los editores más populares que existen, creado y mantenido por Microsoft, es gratuito, y se utiliza especialmente para desarrollar en múltiples lenguajes de programación. Una de sus mejores características principales es que permite a desarrolladores crear extensiones para añadir funcionalidades extra. La comunidad es enorme por lo que hay miles de extensiones para cualquier uso que te puedas imaginar.
Otra característica de VS code es que es una aplicación de escritorio que está creada con Electron JS, lo que significa que internamente funciona con Node.JS y la interfície visual es una página web, con HTML, JavaScript y CSS. Es por ello que si ya conoces estos lenguajes puedes desarrollar la extensión fácilmente después de que te mostremos cómo crearla desde 0.
Como hemos mencionado se requieren conocimientos básicos de JavaScript o TypeScript, HTML y CSS y tener instalado Node.JS. Además es recomendable tener instalado Git y PNPM (aunque puedes usar Yarn o NPM también).
Se puede crear una extensión de VS Code usando el programa Yeoman. Desde la terminal ejecuta el siguiente comando:
npx --package yo --package generator-code -- yo code
Se abríra la aplicación Yeoman y nos preguntará cómo queremos crear y configurar la extensión. A continuacón hemos marcado la opción que debes seleccionar con el símbolo ❯
, aunque puedes escojer las tuyas propias si lo prefieres, y para el ejemplo la extensión se llamará miextension
.
_-----_ ╭──────────────────────────╮ | | │ Welcome to the Visual │ |--(o)--| │ Studio Code Extension │ `---------´ │ generator! │ ( _´U`_ ) ╰──────────────────────────╯ /___A___\ / | ~ | __'.___.'__ ´ ` |° ´ Y `
? What type of extension do you want to create? (Use arrow keys)❯ New Extension (TypeScript) New Extension (JavaScript) New Color Theme New Language Support New Code Snippets New Keymap New Extension Pack New Language Pack (Localization) New Web Extension (TypeScript) New Notebook Renderer (TypeScript)? What's the name of your extension? miextension? What's the name of your extension? miextension? What's the identifier of your extension? miextension? What's the description of your extension?? Initialize a git repository? Yes? Which bundler to use? (Use arrow keys)❯ unbundled webpack esbuild?? Which package manager to use? npm yarn❯ pnpm? Do you want to open the new folder with Visual Studio Code? (Use arrow keys)❯ Open with `code`
La última pregunta pide si queremos abrir VS Code después de que Yeoman cree el proyecto, si seleccionamos code
se abrirá una nueva ventana de VS Code con el código de la extensión.
Después de configurar el proyecto con Yeoman, ya podemos empezar a desarrollar la extensión. Por defecto ya se podría ejecutar, pero haremos algunos cambios para ver los conceptos más importantes.
Lo primero es configurar el archivo package.json
, hay un apartado donde podemos definir los comandos. En nuestro caso modificaremos el título para reconocerlo luego en la lista de comandos de VS Code.
{ "contributes": { "commands": [ { "command": "miextension.helloWorld", "title": "Iniciar mi extensión" } ] }}
Luego, en el archivo src/extension.ts
podemos modificar el mensaje que aparecerá cuando seleccionemos el comando anterior.
...const disposable = vscode.commands.registerCommand('miextension.helloWorld', () => { vscode.window.showInformationMessage('Hola desde miextension!');});...
Para probar la extensión podemos depurarla. Dentro del editor pulsa F5
o ejecuta el comando Debug: Start Debugging desde la paleta de comandos (Ctrl+Shift+P
en Windows o ⇧⌘P
en Mac). Esto compilará y ejecutará la extensión en una nueva ventana de VS Code.
En la nueva ventana de VS Code podemos volver a abrir la paleta de comandos (Ctrl+Shift+P
en Windows o ⇧⌘P
en Mac) y si escribimos el título del comando que hemos definido antes en el package.json
Iniciar mi extensión
y lo seleccionamos, veremos aparecer una notificación con el mensaje Hola desde miextension!
.
Genial! Ya sabes como se crea una extensión. En este artículo hemos visto lo más sencillo, configurar el proyecto con Yeoman, configurar un comando de la extensión para visualizarlo en VS Code y cómo depurarla. En un próximo artículo veremos cómo implementar una extensión más compleja.