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"
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:
vscode
para facilitar la creación de snippets