Podemos por tanto definir un snippet como "plantillas que facilitan la introducción de patrones de código repetitivos"
Un ejemplo de snippet es el que se usa para crear el boilerplate de HTML5 en el que basta escribir el símbolo "!" para obtener la estructura de un documento HTML5 "por arte de magia".
Visual Sutio Code almacena los snippet en ficheros json de tal manera que los snippet de javascript se encuentran en el fichero "javascript.json", los de typescript en "typescript.json" y así con el resto de lenguajes.
Para ver los ficheros disponibles para los distintos lenguajes podemos ir al menú Archivo > Preferencias > Fragmentos de código de usuario
Esto nos mostrará un listado con los lenguajes disponibles:
En estos ficheros es donde añadiremos nuestros snippets.
Un snippet es un objeto JSON que tiene las siguientes propiedades:
- nombre del snippet
- prefijo: prefijo con el que identificamos el snippet
- body: contenido del mismo.
- descripción: una breve descripción del snippet
Si seleccionamos un fichero, como por ejemplo el typescript.json, veremos que nos aparece una ayuda en forma de comentarios.
Vamos a crear un snippet a modo de ejemplo para entender mejor como se crean.
Supongamos que queremos crear un snippet de una función que usamos de una determinada librería que hemos creado previamente. Esta función es un conector a un API y tiene la siguiente firma:
connectorApi(message: string | Object, url: any, method: NuarHttpMethod, applicationHeaders?: any, timeout?: number, async: boolean = false, isSecure: boolean = true): Observable<any>
El snippet que queremos crear es una llamada a este método al cual nos vamos a subscribir y mostrar un console.log para el next y otro para el error.
Podemos pensar inicialmente en algo así:
"connectorApi": {
"prefix": "custom",
"body": [
"this.myservice.connectorApi('https://jsonplaceholder.typicode.com/posts', 'GET', '').subscribe(", "data => console.log(data),",
"error => console.log(error));"
],
"description": "Llamada función connectorApi"
}
Para usar este snippet basta con teclear el prefijo que hemos indicado, es decir basta con teclear "custom" en visual studio code, lo que nos mostrará la información del snippet tal como podemos observar en la siguiente imagen:
El problema del snippet anterior es que siempre nos va a colocar valores fijos. El servicio, la url del api, el tipo de llamada etc. y nosotros realmente lo que queremos es introducir esos valores en el momento de usar el snippet.
Para ello, podemos reemplazar los valores que queramos por:
$x: Situa el cursor en la posición para introducir un valor
${x:label} igual que el anterior pero colocando el valor definido en la propiedad "label"
Vamos a verlo mejor con el ejemplo anterior, pero especificando valores por defecto que pueda cambiar el usuario si lo desea.
"connectorApi": {
"prefix": "custom",
"body": [
"this.${1:service}.connectorApi('${2:http://}', ${3:get}, '$4').subscribe(",
"data => console.log(data),",
"error => console.log(error));"
],
"description": "Llamada función connectorApi"
}
Lo que hemos cambiado es el body del snippet. En concreto ahora el nombre del servicio toma como valor por defecto "service" (${1:service}) pero el usuario puede especificar el nombre de su servicio lógicamente.
Lo mismo para el parámetro de la url (${2:http://}) donde por defecto aparece como url "http://"
De forma similar especificamos el método que por defecto será "get" ${3:get} y para el último parámetro ($4) no hay valor por defecto y el usuario puede especificar el valor que desee.
Como anotaciones indicar que podemos especificarel mismo índice repetido en distintas posiciones, es decir, podriamos tener dos $1 en distintas posiciones del snippet (inicialmente según tecleemos un valor se asignará a todas las posiciones donde este el mismo índice, pero podemos cambiar independientemente el valor de las mismas para cada posición)
Por otra parte, si nos fijamos en el body del snippet, está formado por distintas líneas separadas por comas entre ellas, y donde cada línea debe ir entrecomillada.
El resultado de nuestro snippet es el que podemos observar en la siguiente imagen:
Los snippets nos pueden servir para no tener que escribir tanto código repetitivo, o al menos a facilitarnos en la medida de lo posible que no sea tan tedioso estar tecleando siempre las mismas porciones de código para determinadas funcionalidades.
