En este tutorial aprenderas a crear una extension muy sencilla de Visual Studio Code para que puedas tener una idea de como se crean y que necesitas saber para poder crear otras más elaboradas.
Requerimientos
Asegúrate de tener instalado Visual Studio Code, Node.js y npm en tu ordenador. Si no los tienes instalados, puedes descargarlos e instalarlos desde los siguientes enlaces:
Crea un nuevo proyecto
Para poder crear extensiont Visual Studio Code ya provee un generator de proyectos a traves de un programa llamado Yeoman, este es un CLI o programa de consola que creara todos los archivos necesarios, para no empezar desde cero.
Primero necesitas instalar Yeoman, usando el siguiente comando:
npm install -g yo generator-code
Tu primer extension de VSCode
Luego de instalado yeoma ejecuta lo siguiente para crear un proyecto:
yo code
Este comando creara una plantilla para tu extensión de Visual Studio Code y te hace algunas preguntas para configurar tu proyecto, como el nombre y la descripción de la extensión.
Y como hay muchas cosas que podemso hacer en el editor como:
- Themes, para crear temas para el editor
- Soporte de lenguajes, para añadir un nuevo lenguaje
- Snippets, para generar porciones de codigo
- Shortcuts, para crear atajos de teclado
- Extension Packs, para juntar multiples extensiones en una sola
En nuestro caso empezaremos creando Snippets, que es algo que muchos desarrolladores puede utilizar en su dia a dia.
Snippets
Ahora vamos a crear un primer snippet en vscode
yo code
ejecuta lo siguiente:
? What type of extension do you want to create? New Code Snippets
? Folder name for import or none for new: <EMPTY>
? What's the name of your extension? first-vscode-snippet
? What's the identifier of your extension? (first-vscode-snippet)
? What's the description of your extension? my first snippet
? Language id: html
? Initialize a git repository? (Y/n) No
❯ Open with `code`
en contrbutes, podras ver los snippets que soporta, de esta forma podemos añadir más tambien para otros lenguajes:
"contributes": {
"snippets": [
{
"language": "html",
"path": "./snippets/snippets.code-snippets"
}
]
}
Por ejemplo podriamos hacer algo como esto:
"contributes": {
"snippets": [
{
"language": "html",
"path": "./snippets/snippets.code-snippets"
},
{
"language": "javascript",
"path": "./snippets/snippets.code-snippets"
},
{
"language": "typescript",
"path": "./snippets/snippets.code-snippets"
},
{
"language": "typescriptreact",
"path": "./snippets/snippets.code-snippets"
},
{
"language": "javascriptreact",
"path": "./snippets/snippets.code-snippets"
}
]
}
Pero para nuestro caso solo dejaremos el de html para tener algo simple, es decir lo mantendremos tal y como estaba, asi:
"contributes": {
"snippets": [
{
"language": "html",
"path": "./snippets/snippets.code-snippets"
}
]
}
en snippets/snippets.code-snippets
{
"generate heading": {
"prefix": "!fheading",
"body": [
"<!---",
"title: $1",
"description: $2",
"--->",
"",
"<div>",
" <h1>$1</h1>",
" <p>$2</p>",
"</div>"
]
}
}
Presiona F5, y en un archivo html ejecuta el snippet "!fheading" admeas tambien puedes presionar Tab paa autocompletar
Creemos una extension
Ahora vamos a crear una extension de vscode que nos permita ejecutar logica dentro del editor.
Escoge Lo siguiente:
# ? What type of extension do you want to create? New Extension (Javascript)
# ? What's the name of your extension? HelloWorld
### Press <Enter> to choose default for all options below ###
# ? What's the identifier of your extension? helloworld
# ? What's the description of your extension? LEAVE BLANK
# ? Initialize a git repository? Yes
# ? Bundle the source code with webpack? No
# ? Which package manager to use? npm
# ? Do you want to open the new folder with Visual Studio Code? Open with `code`
Luego, dentro del editor, presiona F5. Esto compilará y ejecutará la extensión en una nueva ventana del host de desarrollo de extensiones.
Hagamos Cambios
- Cambia el mensaje de "¡Hola mundo de HelloWorld!" a "Hello VS Code" en extension.ts (o extension.js, si estas usando javascript)
vscode.window.showInformationMessage('Hello World from vscode!');
- Ejecute Developer: Reload Window en la nueva ventana.
- Ejecute el comando Hello World nuevamente.
CReemos un comando nuevo
let disposable = vscode.commands.registerCommand('first-vscode-extension.helloWorld', () => {
vscode.window.showInformationMessage('Hello World from first-vscode-extension!');
});
let sayGoodBye = vscode.commands.registerCommand('first-vscode-extension.sayGoodBye', () => {
vscode.window.showInformationMessage('God bye from first-vscode-extension!');
});
context.subscriptions.push(disposable);
context.subscriptions.push(sayGoodBye);
contributes:
"contributes": {
"commands": [
{
"command": "first-vscode-extension.helloWorld",
"title": "Hello World"
},
{
"command": "first-vscode-extension.sayGoodBye",
"title": "Good Bye"
}
]
},
Sidebar
añade esto en package.json
{
"contributes": {
"viewsContainers": {
"activitybar": [
{
"id": "package-explorer",
"title": "Package Explorer",
"icon": "resources/package-explorer.svg"
}
]
},
"views": {
"package-explorer": [
{
"id": "package-dependencies",
"name": "Dependencies"
},
{
"id": "package-outline",
"name": "Outline"
}
]
}
}
}