Crear nuestra primera extensión para Visual Studio Code (IV)
Crear nuestra primera extensión para Visual Studio Code (I)
Crear nuestra primera extensión para Visual Studio Code (II)
Crear nuestra primera extensión para Visual Studio Code (III)
Crear nuestra primera extensión para Visual Studio Code (V)
Introducción
Después de crear la estructura base de nuestra extensión, y haberla abierto en Visual Studio Code, vamos a trabajar en ella.
Crear una imagen para nuestra extensión
Empiezo por aquí porque es lo más sencillo, se suele hacer al final, y también se nos suele olvidar, así que para entrar en materia, vamos a crear un icono o imagen para nuestra nueva extensión.
Con ayuda de Inkscape, he creado una imagen de 128×128 píxeles y en formato png.
Una recomendación: no uses una imagen en formato svg. 😉
Para esto, he creado la siguiente imagen (nada del otro mundo, y solo a efectos de test).
A esta imagen la pondré el nombre de html.png.
Crearé dentro de Visual Studio Code una carpeta images, y pondré dentro de esa carpeta la imagen que hemos creado.
A continuación deberemos asignar esta imagen a nuestra extensión.
Para ello, haremos clic sobre el archivo package.json y agregaremos el nombre de la imagen en la etiqueta icon:
«icon»: «images/html.png»,
Crear las extensiones de HTML
Para este ejemplo, vamos a crear una extensión de HTML.
Para ello, abriremos el archivo snippets.json que está dentro de la carpeta snippets.
Cambiaremos el nombre de este archivo por html.json.
Y escribiremos dentro de este archivo el siguiente contenido:
{
«Sample HTML»: {
«prefix»: «sample_html»,
«body»: [
«<html>»,
«\t<head>»,
«\t\t<title>Sample</title>»,
«\t</head>»,
«\t<body>»,
«\t$2»,
«\t</body>»,
«</html>»
],
«description»: «Sample HTML – Demo»
}
}
El siguiente paso es abrir el archivo package.json y cambiar la ruta de nuestros recortes o snippets para que apunte a la carpeta y fichero correcto.
En mi caso a:
«path»: «./snippets/html.json»
Ajustar package.json
El siguiente paso a realizar es ajustar package.json para que se adapte a nuestras necesidades.
En este caso, voy a agregar una serie de cambios que a mi parecer nos vendrá bien.
Lo primero, agregar un fichero de Markdown o texto con información de la licencia.
En mi caso he creado un archivo llamada LICENSE.md y he agregado la ruta en el archivo package.json.
También he decidido modificar el archivo README.md con el siguiente contenido:
## geeks-ms README
Sample extension for Visual Studio Code.
# **This is for test proposals**
En el caso de que tengamos nuestro código como código abierto y queramos poner un enlace a él, podremos hacerlo también dentro del package.json.
Por ejemplo, y suponiendo nuestro caso y ejemplo, podríamos hacerlo perfectamente de esta forma:
«repository»: {
«type»: «git»,
«url»: «https://github.com/J0rgeSerran0/vscode-html-geeksms-demo-snippets.git»
},
También podemos agregar las categorías donde se publicaría nuestra extensión.
En nuestro caso, he cambiado dentro del package.json el siguiente contenido:
«categories»: [
«Languages»,
«Snippets»
],
Y exactamente lo mismo con las palabras clave o keywords:
«keywords»: [
«HTML»,
«Languages»,
«Snippets»,
«Web»
],
También podemos indicar el número de versión mínima de Visual Studio Code que implica el uso de nuestras extensiones.
En mi caso, he puesto lo siguiente:
«engines»: {
«vscode»: «^1.10.0»
},
Otros ajustes
Como ajustes complementarios, podríamos eliminar el archivo vsc-extension-quickstart.md que conviene leer antes de eliminarlo para conocer un poco más algunas cosas sobre la creación de extensiones de Visual Studio Code.
En este punto, estaríamos listos para publicar ya nuestra extensión.
Que duda cabe que deberíamos modificar los archivos de Markdown, etc.
Pero obviando esto ahora, vamos a seguir adelante.
(Continuaremos en la siguiente entrada)
¡Happy Coding!
