¿Cómo agregar fragmentos de código personalizados en VSCode?

101

¿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.

BeastCode
fuente
2
También puede ir a Preferencias> Fragmentos de usuario y luego seleccionar el idioma en el que desea crear un fragmento.
Amituuush
¿Existe realmente una relación entre VS Code como Atom además del hecho de que ambos usan Electron debajo del capó?
skelliam
Utilice el servicio codessnippet para hacer eso. Puede crear fragmentos personalizados, editar y sincronizar con codessnippet cli todos los fragmentos a la vez, ¡simplemente extrayéndolos del servidor!
user13428826
Quiero agregar un enlace de página web en la descripción, ¿alguien sabe cómo hacerlo?
enero a

Respuestas:

116
  1. Pulsa> shift+ command+ py escribe fragmentos
  2. Seleccionar preferencias: Abrir 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, como se describe en:> vsdoc

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

  1. Pulse> command+p
  2. Escriba: go.json + enterY aterrizará en la página del fragmento personalizado

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


Actualizar nuevas herramientas:
Sitio del generador de fragmentos: https://snippet-generator.app/

Chandan Nayak
fuente
3
El generador de fragmentos es muy útil
rainversion_3
68

opción - 1 Hay un complemento VsCode llamado: snippet creator ..

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

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

opción - 2 consulte este sitio web . puede generar fragmentos de código vs, texto sublime y átomo.

Una vez que se genera un fragmento en este sitio. Vaya al archivo de fragmentos del IDE respectivo y péguelo. Por ejemplo, para un fragmento de código JS en el código VS, vaya a Archivo-> preferencia-> fragmento de usuario, luego abre el archivo javascript.json, luego pegue el código del fragmento del sitio anterior dentro de este y estamos listos para comenzar.

Pranay Kumar
fuente
8
¡Esta es una herramienta increíble! No podía soportar escribir un fragmento de código HTML personalizado y tener que citar y escapar de cada línea, por lo que esta es realmente la respuesta que estaba buscando.
nabrown
3
En serio, salvavidas aquí.
JeremyW
Vaya, esta es una gran herramienta que funcionó perfectamente. Debe marcarse como respuesta correcta
StefanBob
El enlace del generador de fragmentos está roto. Siga este enlace: snippet-generator.app
Sandip Subedi
1
¿Por qué escribiste step1 y step2? esto se siente más como la opción 1 y la opción 2, ¿o están relacionados?
Xsmael
26

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 buscar / crear fragmentos personalizados colocando el archivo json en formato C:\Users\<yourUserName>\AppData\Roaming\Code\User\snippets. Por ejemplo, un fragmento de JavaScript personalizado estaría en un\snippets\javascript.json

También puede publicar sus fragmentos, que también es una característica muy interesante. John Papa creó un buen fragmento de texto mecanografiado angular + que puede descargar como una extensión en el mercado .

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

"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
  • prefixdefine un prefijo utilizado en el menú desplegable IntelliSense. En este caso para.
  • bodyes el contenido del fragmento. Las posibles variables son:
    • $ 1, $ 2 por tabulaciones
    • $ {id} y $ {id: label} y $ {1: label} para variables
    • Las variables con el mismo id están conectadas.
  • description es la descripción utilizada en el menú desplegable de IntelliSense
Prancer
fuente
6
Realmente necesitan algún tipo de sintaxis literal de cadena de varias líneas o una forma de extraer el cuerpo en un archivo separado. Citar y escapar de cada línea es una locura.
Mark Wilbur
Perdón por el voto en contra de esta respuesta, fue un clic deshonesto 🙄
Giles Butler
16

Puede ver este video para ver un breve tutorial rápido

https://youtu.be/g1ouTcFxQSU

Vaya a Archivo -> Preferencias -> Fragmentos de usuario . Seleccione su idioma preferido.
Ahora escriba el siguiente código para hacer un fragmento de bucle for:

  "Create for loop":{
    "prefix": "for",
    "body":[
      "for(int i = 0; i < 10; i++)",
      "{",
      "   //code goes here",
      "}"
    ],
   "description": "Creates a for loop"
  }

Estás listo.
Escriba "para" en el editor y utilice la primera predicción.

ATAJO--

  1. instale la extensión Snippet-creator .
  2. Resalte el código que necesita para hacer un fragmento.
  3. presione ctrl+ shift+ Py escriba "Create snippet" en la paleta de comandos y presione ENTER.
  4. seleccione el idioma para el que desea crear el fragmento (por ejemplo: -CPP), luego escriba el
    nombre del fragmento, escriba el acceso directo del fragmento y luego escriba la descripción del fragmento.
    Ahora está listo para comenzar.
    Escriba el acceso directo del fragmento en el editor que ingresó en el paso 4 y seleccione la
    predicción (si no aparece ninguna predicción, presione ctrl + espacio) que viene primero.

Espero que esto ayude :)

Nota: vaya a Archivo-> Preferencias-> Fragmentos de usuario. Luego, seleccione el idioma en el que
creó el fragmento. Encontrará el fragmento allí.

vinod
fuente
9

Hay un complemento de VsCode llamado: snippet creator ...

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

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

Eso es todo ..

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

Peter Shaker
fuente
5

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

Si elige Javascript, puede ver un script personalizado predeterminado de console.log(' ');esta manera:

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

Intenté agregando fragmentos en javascriptreact.json pero no funcionó para mí.

Intenté agregar fragmentos al alcance global y está funcionando a la perfección.

FILE --> Preferences --> User snippets

aquí selecciona New Global Snippets File, dale nombre javas criptreact.code-snippets.

Para otros idiomas, puede nombrar como [your_longuage] .code-snippets

ingrese la descripción de la imagen aquí

Lakkanna walikar
fuente
4

Esta es una característica indocumentada a partir de ahora, pero estará disponible 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 está llegando.

John Papa
fuente
0

Si prefiere no ocuparse de escribir sus fragmentos en JSON, consulte Snipster . Le permite escribir fragmentos como escribiría el código en sí, sin tener que envolver cada línea entre comillas, caracteres de escape, agregar metainformación, etc.

También te permite escribir una vez, publicar en cualquier lugar . Para que pueda usar su fragmento en VS Code, Atom y Sublime, además de más editores en el futuro. Más info aquí .

jhanstra
fuente
0

Es posible que esta no sea una respuesta real (como algunos han respondido anteriormente), pero si está interesado en crear fragmentos de código personalizados para otras personas, puede crear extensiones usando yeoman y npm (que por defecto viene con NodeJS). NOTA: Esto es solo para crear fragmentos para los sistemas de otros. ¡Pero también funciona para ti! Excepto que necesita código JS para todo.

airax86
fuente