DEV Community

Franco Andrés
Franco Andrés

Posted on • Edited on

4 1

Cómo crear tus propios Snippets para VSCode

Hoy te voy a mostrar como crear tus propios Snippets para Visual Studio Code sin necesidad de instalar una extensión.

⚠️ Spoiler Alert

Es muy fácil crear snippets. :)

Empecemos

Abre VSCode y haz lo siguiente:

Ctrl + P e ingresa "preferences": "User Snippets" y elije el lenguaje que desee.

Aquí un ejemplo para JavaScript:

{
  "Require": [
    "prefix": "req",
    "body": [
      "const name = require('');"
    ],
    "description": "Abreviación del código reservado require."
  ]
}
Enter fullscreen mode Exit fullscreen mode

Después de esto guarda el archivo y crea un archivo JavaScript y coloca req que sería la abreviación de nuestro Snippets, VSCode auto completara mientras lo escribes y preciona la tecla tab o enter. Ahora tenemos un require() guardado en una constante.

Aquí un ejemplo de un Snippets que cree para CSS, puedes verlo en el siguiente tweet.

Otro ejemplo es crear snippets para los meta tags

Ejemplo:
creación del snippets

como se ve nuestro Snippets en un archivo

Y eso es ya lo tienes, ahora ya sabes como crear tus propios snippets, elige el lenguaje que desees y listo.
Hasta puedes crear tu propia extensión. :)

Gracias por leer!!

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay