Acelera tu desarrollo con esta nueva extensión de VS Code
Hace poco, un par de desarrolladores crearon una extensión de VS Code, Snipsnap, que pretende resolver el problema de las colecciones de snippets de código.
Snipsnap es una colección definitiva de snippets y una extensión de VS Code que pone a tu disposición automáticamente todos los snippets disponibles para cada librería que usas en tu proyecto.
Ya incluye snippets para React, Redux, Gatsby, Next.js y Vue. Puedes consultar la lista completa de snippets aquí.
🔥 ¿Qué problema intenta resolver Snipsnap?
Problema n.º 1 Casi todos los lenguajes populares tienen muchísimas librerías que la gente usa habitualmente. Algunas son grandes y otras pequeñas. Para usar cada una tienes que recordar un montón de construcciones sintácticas diferentes. Los snippets de código ayudan, pero no vas a crear ni a instalar una extensión para cada librería pequeña. La idea es tener una única extensión, Snipsnap, que obtenga los snippets relevantes según los lenguajes y paquetes que usas en tu proyecto actual.
Problema n.º 2 Cada extensión de snippets sigue sus propias reglas y usa atajos imprevisibles como "rccp", "ecrp", 'impp', etc. Con esos atajos ilegibles no puedes buscar entre todos los snippets que tienes para un caso concreto. Snipsnap quiere cambiarlo estandarizando el formato de los snippets y ofreciendo una sintaxis de búsqueda limpia y predecible, del tipo nombre-de-librería palabra-clave, para que siempre puedas escribir el nombre de tu librería y obtener la lista completa de snippets disponibles.
Problema n.º 3 Cada IDE tiene su propio formato de snippets, incompatible con el de los demás. Un formato de snippets independiente permitiría crear extensiones de Snipsnap para cada IDE popular y, mediante conversores, transformar los snippets de un formato a otro.
🛠️ Cómo funciona
La extensión Snipsnap para VS Code analiza tu package.json (o yarn.lock) y busca en el servidor los snippets disponibles para los paquetes de tu proyecto. Es decir, ya no necesitas instalar distintas extensiones de snippets para los frameworks y librerías que usas.
La extensión Snipsnap crea el archivo snipsnap.code-snippets dentro de la carpeta .vscode con todos los snippets, así que estarán disponibles incluso para otros desarrolladores que no hayan instalado la extensión.
Snipsnap busca snippets nuevos:
- al abrir una carpeta
- al ejecutar el comando "Snipsnap: Fetch the snippets" desde la paleta de comandos. Todos los snippets presentes actualmente en este repositorio siguen las pautas que se describen más abajo.
🗓️ Planes y visión del proyecto
La versión actual se podría considerar un MVP y tiene un único objetivo: validar la idea y recoger las primeras opiniones. Si te gusta la extensión, dale una estrella al repositorio, cuéntales tu experiencia a sus autores o ayuda a mejorar el proyecto.
La intención es no quedarse solo en los snippets para JavaScript, sino convertirlo en un estándar para todos los lenguajes populares y sus gestores de paquetes. Así que cubrir librerías de Ruby, Go, Python y PHP también entra en los planes.
La apuesta es que los snippets pueden convertirse en la solución perfecta para ofrecer documentación sencilla y ejemplos. Los snippets de código deberían formar parte de los repositorios de los paquetes, igual que los archivos README. Creas tu librería, incluyes con ella los snippets en un archivo .snipsnap.json y Snipsnap los obtiene.
Una colección estandarizada permitiría escribir extensiones y conversores para todos los IDE populares, lo que por fin haría que los snippets de código fueran independientes del IDE. Imagina que dentro de un par de años sale un IDE nuevo y fantástico: en lugar de escribir una tanda entera de snippets para él, podrías seguir usando Snipsnap y la colección que ya habías creado.
💡 Tu opinión cuenta
A sus autores les interesa mucho saber qué opinas de Snipsnap. Puedes hacérselo saber dejando un comentario o abriendo un issue en GitHub.
