Snippets en VScode: Pequeños Atajos para tu Productividad

Por /

Como desarrolladores, pasamos gran parte de nuestro tiempo escribiendo código. La repetición de estructuras, bucles, componentes y funciones puede volverse tediosa y propensa a errores. Aquí es donde los snippets de Visual Studio Code entran en juego, transformándose de un simple atajo a una herramienta poderosa para multiplicar nuestra productividad.

Nuestro Blog

Cientos de Posts de tecnología para ti

Aunque la mayoría conoce los snippets básicos que vienen por defecto, hoy vamos a sumergirnos en el mundo de los snippets personalizados, aquellos que puedes crear tú mismo para automatizar las tareas más recurrentes en tu flujo de trabajo. Te mostraré cómo funcionan, te daré algunos ejemplos funcionales que pocos usan, y te guiaré paso a paso para que los implementes en tu editor. Tambien puedes visitar ésta página para otros snippets que puedes usar.

¿Qué son los Snippets y por qué son tan útiles?

Un snippet es un pequeño «fragmento de código» reutilizable que se puede insertar en un archivo con solo unas pocas pulsaciones de teclas. En lugar de escribir una estructura completa como un bucle for o una función de React, puedes simplemente escribir un prefijo corto y el editor se encargará de generar el resto del código por ti.

Snippets en VScode con SofTim

La verdadera magia reside en que los snippets no son solo texto estático. Pueden incluir variables, marcadores de posición (placeholders) para que el cursor se posicione automáticamente, y opciones de selección para que puedas elegir entre diferentes valores.

Cómo funcionan:

  1. Prefijo (prefix): Es la palabra clave que escribes para activar el snippet.
  2. Cuerpo (body): Es el código que se inserta. Puede ser una sola línea o una estructura compleja de varias líneas.
  3. Marcadores de posición ($1, $2, etc.): Indican dónde se colocará el cursor después de la inserción, permitiéndote rellenar los datos dinámicamente. El $0 marca la posición final del cursor.

Cómo Crear tus Propios Snippets en VS Code

Para crear un snippet personalizado, solo necesitas seguir estos sencillos pasos:

  1. Abre la paleta de comandos de VS Code (Ctrl + Shift + P en Windows/Linux o Cmd + Shift + P en macOS).
  2. Escribe «Configure User Snippets» y presiona Enter.
  3. Selecciona el lenguaje para el que quieres crear el snippet (por ejemplo, javascript, javascriptreact, typescript, css). Esto abrirá un archivo *.json.

Ahora, dentro de las llaves { } de este archivo JSON, puedes empezar a definir tus snippets. Cada snippet es una clave-valor con la siguiente estructura:

JSON

"Nombre del Snippet": {
  "prefix": "tu_prefijo",
  "body": [
    "Línea de código 1",
    "Línea de código 2",
    "etc..."
  ],
  "description": "Una descripción clara de lo que hace el snippet."
}

Cada línea del body debe ser una cadena dentro de un array. Usa $ seguido de un número para los marcadores de posición.

Snippets Funcionales que Mejorarán tu Rendimiento

Aquí tienes algunos ejemplos de snippets que te ahorrarán un tiempo valioso, que a menudo no vienen por defecto o que son más específicos de un flujo de trabajo moderno.

1. Snippet para Peticiones fetch (JavaScript)

¿Cuántas veces has escrito el mismo bloque de código para hacer una petición fetch? Con este snippet, lo generas al instante.

Funcionalidad: Crea la estructura completa de una petición fetch usando async/await y bloques try/catch para manejar errores, una práctica fundamental para la robustez del código.

Código del Snippet (javascript.json):

JSON

"Fetch Async/Await with try/catch": {
  "prefix": "fa",
  "body": [
    "const fetchData = async (url) => {",
    "  try {",
    "    const response = await fetch(url);",
    "    if (!response.ok) {",
    "      throw new Error(`HTTP error! status: ${response.status}`);",
    "    }",
    "    const data = await response.json();",
    "    console.log(data);",
    "    return data;",
    "  } catch (error) {",
    "    console.error('There was a problem with the fetch operation:', error);",
    "  }",
    "};",
    "",
    "fetchData('$1');$0"
  ],
  "description": "Crea una petición fetch asíncrona con manejo de errores."
}

Prueba de uso:

  1. En un archivo JavaScript, escribe fa.
  2. Presiona Enter o Tab.
  3. El snippet se expandirá, y tu cursor se colocará automáticamente en el marcador de posición $1 dentro de la llamada a fetchData, listo para que introduzcas la URL de la API. El cursor final ($0) se posicionará al final del bloque.
2. Snippet para un Componente de React con Propiedades (JSX)

Este snippet es una joya si trabajas con React. Genera un componente de función con sus props desestructuradas y con un Fragment, una práctica recomendada.

Funcionalidad: Crea un componente de React con una función de flecha, desestructuración de props y un return con un Fragment vacío.

Código del Snippet (javascriptreact.json o typescriptreact.json):

JSON

"React Functional Component with Props": {
  "prefix": "rfc",
  "body": [
    "import React from 'react';",
    "",
    "const ${1:Componente} = ({ ${2:props} }) => {",
    "  return (",
    "    <>",
    "      ${3:// Contenido del componente}",
    "    </>",
    "  );",
    "};",
    "",
    "export default ${1:Componente};$0"
  ],
  "description": "Crea un componente de función de React con desestructuración de props."
}

Prueba de uso:

  1. En un archivo .jsx, escribe rfc.
  2. Presiona Enter o Tab.
  3. El cursor se colocará en el marcador de posición $1, donde puedes escribir el nombre del componente (ej. Boton). Presiona Tab de nuevo para mover el cursor al marcador de posición $2 para las props, y otra vez para el $3, donde escribirás el contenido del componente.
3. Snippet para Media Queries de CSS

Olvídate de memorizar la sintaxis de las media queries. Con este snippet, generas una estructura básica lista para usar.

Funcionalidad: Genera la estructura de una media query para una pantalla de tamaño mínimo, una de las más comunes en el desarrollo responsive.

Código del Snippet (css.json):

JSON

"Media Query (min-width)": {
  "prefix": "mqm",
  "body": [
    "@media (min-width: ${1:768}px) {",
    "  $2",
    "}"
  ],
  "description": "Crea una media query para un tamaño mínimo de pantalla."
}

Prueba de uso:

  1. En un archivo CSS, escribe mqm.
  2. Presiona Enter o Tab.
  3. El cursor se colocará en $1, donde puedes definir el min-width que necesites. Luego, presiona Tab para moverte a $2 y empezar a escribir tus estilos.

Consejos Adicionales para Maximizar el uso de Snippets

  • Mantén tus prefijos cortos y mnemotécnicos: Usa iniciales o abreviaturas que te sean fáciles de recordar (ej. fa para fetch async, rfc para react functional component).
  • Aprovecha la comunidad: Antes de crear un snippet, busca si ya existe una extensión popular que haga lo que necesitas. Extensiones como ES7+ React/Redux/React-Native snippets o Simple React Snippets ya vienen con cientos de snippets listos para usar que te cubrirán la mayoría de los casos.
  • Comparte tus snippets: Si creas un conjunto de snippets que encuentras particularmente útiles, considera compartirlo con tu equipo o incluso publicarlo como una extensión en el Marketplace de VS Code. Esto no solo beneficia a otros, sino que también solidifica tu conocimiento y te da visibilidad.

Conclusión: La Inversión de Tiempo que más Rinde

Crear un puñado de snippets personalizados puede parecer una tarea menor, pero el retorno de la inversión en tiempo y esfuerzo es enorme. Cada vez que generas un bloque de código en segundos en lugar de minutos, estás liberando tu mente para enfocarte en la lógica real de tu aplicación, en lugar de en la sintaxis repetitiva.

Dedica 15 minutos hoy para identificar los 3 o 4 fragmentos de código que más escribes repetidamente y transfórmalos en snippets. Es un pequeño cambio en tu flujo de trabajo que te hará sentir como un verdadero mago del teclado, multiplicando tu eficiencia y haciendo que tu experiencia de codificación sea mucho más fluida y agradable. ¡Empieza a teclear menos y a programar más!

Scroll al inicio