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

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

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/

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.

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

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

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"

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"
},

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

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.

VSCode introduce esto en la versión 0.5, consulte aquí . La sintaxis del fragmento sigue la sintaxis del fragmento de TextMate y puede escribir en las preferencias del usuario.

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

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.