code snippets - studio - ¿Cómo agregar fragmentos de código personalizados en VSCode?

snippets visual studio code

Question

¿Es posible agregar fragmentos de código personalizados en Visual Studio Code? Y si es así, ¿cómo? VSCode se basa en Atom, por lo que debería ser posible.

Answer 1

1. Presiona> shift + command + p y escribe fragmentos
2. Selecciona Preferencias: Abre Fragmentos de Usuario
3. Elija el tipo de idioma para el que desea agregar el fragmento personalizado
4. vscode tiene comentarios para explicar cómo agregar un fragmento de vsdoc , tal como se describe en:> vsdoc

Digamos que queremos abrir fragmentos personalizados para el idioma GO. Entonces podemos hacer:

1. Golpear> comando + p
2. Escriba: go.json + enter Y aterrizará en la página de fragmentos personalizados

Los fragmentos se definen en formato JSON y se almacenan en un archivo por usuario (languageId) .json. Por ejemplo, los fragmentos de código de Markdown van en un archivo markdown.json.

Answer 2

Esta es una característica no documentada a partir de ahora, pero llegará pronto. Hay una carpeta a la que puede agregarlos y aparecerán, pero puede cambiar (no está documentado por una razón).

El mejor consejo es agregar esto al sitio de uservoice y esperar hasta su final. Pero ya viene.

Answer 3

Hay un complemento de VsCode llamado: creador de fragmentos de código ...

Después de instalarlo, todo lo que tienes que hacer es:

1. Seleccione el código que desea convertirlo en un fragmento.
2. Haga clic derecho en él y seleccione "Command Palette" (o Ctrl + Shift + P ).
3. Escribe "Crear Fragmento".
4. Elija un nombre de fragmento.
5. Elija un atajo de fragmento.
6. Elija el tipo de archivos que se deben ver para activar el acceso directo de su fragmento.

Eso es todo ..

Nota: si desea editar sus fragmentos, los encontrará en [fileType] .json
Ejemplo: Ctrl + P , luego seleccione "javascript.json"

Answer 4

Puede agregar scripts personalizados, vaya a File --> Preferences --> User Snippets . Seleccione su idioma preferido.

Si elige Javascript, puede ver el script personalizado predeterminado para console.log('' ''); Me gusta esto:

"Print to console": {
"prefix": "log",
"body": [
"console.log(''$1'');",
"$2"
],
"description": "Log output to console"
},

Answer 5

Revisa este website . Puedes generar fragmentos de código para vs, texto sublime y átomo.

Answer 6

Si prefieres no tratar de escribir tus fragmentos en JSON, echa un vistazo a Snipster . Le permite escribir fragmentos como escribiría el código en sí mismo, sin tener que ajustar cada línea entre comillas, caracteres de escape, agregar información meta, etc.

También te permite escribir una vez, publicar en cualquier lugar . Por lo tanto, puede usar su fragmento de código en VS Code, Atom y Sublime, además de más editores en el futuro. Más información aquí .

Answer 7

VSCode introduce esto en la versión 0.5, vea aquí . La sintaxis de fragmentos sigue la sintaxis de fragmentos de TextMate y puede escribir en Preferencias de usuario.

Answer 8

A partir de la versión 0.10.6 puede agregar fragmentos personalizados. Lea la documentación sobre cómo crear sus propios fragmentos . Puede encontrar / crear fragmentos personalizados colocando el archivo json en C:/Users/<yourUserName>/AppData/Roaming/Code/User/snippets . Por ejemplo, un fragmento de javascript personalizado estaría en un /snippets/javascript.json

También puedes publicar tus fragmentos de código, que también es una característica realmente interesante. John Papa creó un buen fragmento angular + mecanografiado que puede descargar como una extensión en el marketplace .

Aquí hay un fragmento de ejemplo tomado para la documentación en un javascript para bucle:

"For Loop": {
"prefix": "for",
"body": [
"for (var ${index} = 0; ${index} < ${array}.length; ${index}++) {",
"/tvar ${element} = ${array}[${index}];",
"/t$0",
"}"
],
"description": "For Loop"
},

Dónde

• For Loop es el nombre del fragmento
• prefix define un prefijo utilizado en el menú desplegable de IntelliSense. En este caso para.
• body es el contenido del fragmento. Las posibles variables son:
  • $ 1, $ 2 para tabulaciones
  • $ {id} y $ {id: label} y $ {1: label} para las variables
  • Las variables con la misma id están conectadas.
• description es la descripción utilizada en el menú desplegable de IntelliSense.