HOME

En código, un snippet se refiere a un código concreto (una línea, una palabra o una función entera) que en este contexto quiere decir el poder insertar ese snippet con un simple atajo de teclado, o que nos aparezca al escribir una palabra concreta

Para crearlos en vscode, seleccionar en el menú de arriba File -> Preferences -> User Snippets

Allí podemos seleccionar e ir a los snippets de JavaScript que asimismo abre un archivo javascript.json que en Windows se almacenará en C:\Users\tu_usuario\AppData\Roaming\Code\User\snippets

El propio archivo ya te explica como definir un snippet al uso, y por ejemplo podemos probar el siempre útil console.log

  "Print to console": {
    "scope": "javascript,typescript,markdown,javascriptreact",
    "prefix": "log",
    "body": ["console.log('hola')"],
    "description": "log output to console"
  }

Al escribir con nos saldrá el snippet que hemos configurado en el IntelliSense (que si no nos sale lo podemos mostrar con ctrl + space)

Luego tienes que activar los snippets en las preferencias en File -> Preferences -> Settings

Y allí, bien con el mismo menu o bien en el archivo aparte, que en el caso del workspace que estés utilizando esto es tan sencillo como crear una carpeta .vscode y allí un archivo settings.json

Y en ese archivo settings.json puedes poner lo siguiente

{
  "editor.tabCompletion": "on",
  "editor.snippetSuggestions": "top",
  "editor.quickSuggestions": {
    "other": true,
    "comments": false,
    "strings": false
  }
}

Con esto los snippets ya deberían funcionar, siempre que el archivo sea del tipo que has marcado arriba en el "scope"

Añadir puntos de inserción

Y puestos a pedir, estaría bien que pudiésemos editar partes del snippet mientras escribimos de una manera cómoda

Es muy fácil de implementar, se añaden los insertion points con las variables $1, $2, etc

Por ejemplo

  "Print to console": {
    "scope": "javascript,typescript,markdown,javascriptreact",
    "prefix": "log",
    "body": ["console.log($1)", "$2"],
    "description": "log output to console"
  }

Así el cursor se nos aparecerá en $1 y con el Tab podremos pasar directamente a la posición $2 (si queremos)

Enlaces de utilidad:

• Snipit.io con integración con vscode, gratuito para snippets públicos y perfecto para tenerlos todos bajo control
• Cacher.io con versión gratuita con _snippets_ privados pero sin integración con vscode (sólo en versión pro)
• Snippet-generator.app que te permite transformar tu código a la estructura json de vscode para facilitar la creación de snippets