Crear nuestra primera extensión para Visual Studio Code (III)
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 (IV)
Crear nuestra primera extensión para Visual Studio Code (V)
Introducción
Una vez que hemos completado ya todos los pasos preliminares para poder crear nuestra primera extensión de Visual Studio Code, vamos a ponernos manos a la obra.
Crear la base de una extensión para Visual Studio Code
La herramienta Visual Studio Code Generator (vsce), nos permitirá crear esta base sobre la que trabajaremos.
La extensión que crearé, será una extensión para HTML muy básica, que a partir de un snippet o recorte o atajo de código, nos escriba un texto HTML base.
Algo muy sencillo, sin pretensiones.
Para ello y desde la línea de comandos, escribiremos las instrucciones:
yo code
Aparecerá entonces una imagen similar a la siguiente:
En mi caso y con los cursores, me moveré dentro de las opciones a seleccionar, y eligiré New Code Snippets, y pulsaré Intro.
A continuación nos irá haciendo una serie de preguntas como si de un asistente se tratara.
? Folder name for import or none for new:
(Para este ejemplo, pulsa Intro)
? What’s the name of your extension?
(Escribe lo que quieras. Yo he escrito Geeks.ms)
? What’s the identifier of your extension? (geeks-ms)
(Para este ejemplo, pulsa Intro)
? What’s the description of your extension?
(Escribe lo que quieras. Yo he escrito Extension sample)
? What’s your publisher name (more info: https://code.visualstudio.com/docs/tools/vscecli#_publishing-extensions)?
(Escribe lo que quieras. Yo he escrito jorgeserrano)
Enter the language for which the snippets should appear. The id is an identifier and is single, lower-case name such as ‘php’, ‘javascript’
? Language id:
(Escribe html)
Si hemos completado todo correctamente, el generador nos habrá creado una serie de carpetas y ficheros base sobre los cuales trabajar para crear nuestra extensión.
Abrir la carpeta con Visual Studio Code
Una vez hecho esto, abriremos nuestro proyecto con Visual Studio Code o con un editor que consideres.
Recomiendo el uso de Visual Studio Code porque entre otras cosas, probaremos nuestra extensión con esta herramienta.
Cuando abramos nuestro proyecto de extensión con Visual Studio Code, observaremos algo parecido a lo siguiente:
(Continuaremos en la siguiente entrada)
¡Happy Coding!